/* ============================================================
   HR (휴가현황) — CM card + light/dark 호환 오버라이드
   - 인라인 <style>에 박힌 #0d1835 / #091224 / #1a2e55 등을 var()로 회수
   ============================================================ */

/* ====================  필터 바 (sec-hr 내부)  ==================== */
#sec-hr select,
#sec-hr input[type="text"],
#sec-hr input[type="date"],
#sec-hr input[type="search"] {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--fg) !important;
  border-radius: var(--radius) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-family: var(--font-sans) !important;
}
#sec-hr select:focus,
#sec-hr input[type="text"]:focus,
#sec-hr input[type="date"]:focus,
#sec-hr input[type="search"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  outline: none !important;
}

.hr-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: -2px 0 14px;
}
.hr-tab-btn {
  appearance: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px 8px;
}
.hr-tab-btn:hover {
  color: var(--fg);
}
.hr-tab-btn.on {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.hr-history-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.hr-multi {
  position: relative;
  display: inline-flex;
}
.hr-multi-btn {
  min-width: 112px;
  max-width: 190px;
  height: 31px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  position: relative;
}
.hr-multi-btn::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--fg-muted);
  border-bottom: 1px solid var(--fg-muted);
  transform: translateY(-65%) rotate(45deg);
}
.hr-multi-btn.has-value {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
  font-weight: 700;
}
.hr-multi-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  max-height: 260px;
  overflow: auto;
  z-index: 80;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: var(--shadow-lg);
}
.hr-multi-menu.open {
  display: grid;
  gap: 2px;
}
.hr-multi-menu label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.hr-multi-menu label:hover {
  background: var(--bg-2);
}
.hr-multi-menu input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
}
:root[data-theme="dark"] .hr-multi-btn.has-value {
  background: rgba(99,102,241,.16);
  color: #c7d2fe;
}
.hr-history-kpi {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hr-history-kpi span {
  color: var(--fg-muted);
  font-size: 11px;
  margin-bottom: 5px;
}
.hr-history-kpi strong {
  color: var(--fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  letter-spacing: 0;
}
.hr-history-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
}
.hr-history-panel-head {
  min-height: 44px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.hr-history-panel-head strong {
  color: var(--fg);
  font-size: 12px;
}
.hr-history-summary-table,
.hr-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.hr-history-summary-table thead,
.hr-history-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
}
.hr-history-summary-table th,
.hr-history-table th {
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.hr-history-summary-table td,
.hr-history-table td {
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 10px;
  vertical-align: top;
}
.hr-history-summary-row {
  cursor: pointer;
}
.hr-history-summary-row:hover,
.hr-history-summary-row.on {
  background: var(--primary-50);
}
.hr-history-summary-table td strong,
.hr-history-table td strong {
  display: block;
  color: var(--fg);
  font-weight: 800;
  margin-bottom: 2px;
}
.hr-history-summary-table td span,
.hr-history-table td span {
  color: var(--fg-muted);
  font-size: 10px;
}
.hr-history-table .mono,
.hr-history-table .num {
  font-family: 'JetBrains Mono', monospace;
}
.hr-history-table .num {
  text-align: right;
  white-space: nowrap;
}
.hr-history-title {
  min-width: 240px;
  max-width: 420px;
}
.hr-history-title strong,
.hr-history-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-history-type,
.hr-history-state,
.hr-history-overlap {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px !important;
  font-weight: 800;
  white-space: nowrap;
}
.hr-history-type {
  background: rgba(59,130,246,.12);
  color: #2563eb !important;
}
.hr-history-state.st-completed {
  background: rgba(16,185,129,.12);
  color: #059669 !important;
}
.hr-history-state.st-pending {
  background: rgba(245,158,11,.14);
  color: #b45309 !important;
}
.hr-history-state.st-unsigned {
  background: rgba(100,116,139,.14);
  color: var(--fg-muted) !important;
}
.hr-history-state.st-rejected {
  background: rgba(239,68,68,.14);
  color: #dc2626 !important;
}
.hr-history-state.st-other {
  background: rgba(99,102,241,.12);
  color: var(--primary) !important;
}
.hr-history-overlap {
  margin-left: 6px;
  background: rgba(168,85,247,.12);
  color: #7c3aed !important;
}
:root[data-theme="dark"] .hr-history-summary-row:hover,
:root[data-theme="dark"] .hr-history-summary-row.on {
  background: rgba(99,102,241,.12);
}
:root[data-theme="dark"] .hr-history-type {
  color: #93c5fd !important;
}
:root[data-theme="dark"] .hr-history-state.st-completed {
  color: #6ee7b7 !important;
}
:root[data-theme="dark"] .hr-history-state.st-pending {
  color: #fcd34d !important;
}
:root[data-theme="dark"] .hr-history-state.st-rejected {
  color: #fca5a5 !important;
}
@media (max-width: 1280px) {
  .hr-history-kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .hr-history-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hr-history-kpis { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .hr-tab-btn { padding: 8px 12px; }
}

/* 인사담당자 안내 박스 */
.hr-notice {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--primary-50);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.hr-notice strong { color: var(--fg); margin-right: 4px; }
.hr-notice .key   { color: var(--primary-700); font-weight: 700; }
:root[data-theme="dark"] .hr-notice {
  background: rgba(99,102,241,.10);
  color: var(--fg-muted);
}
:root[data-theme="dark"] .hr-notice .key { color: #C7D2FE; }

/* 그리드 (목록 + 상세) */
.hr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}
@media (max-width: 1100px) {
  .hr-grid { grid-template-columns: 1fr; }
}
.hr-detail-empty {
  text-align: center;
  color: var(--fg-dim);
  padding: 48px 0;
  font-size: 12px;
  line-height: 1.6;
}
#hrTable, #hrDetail { background: var(--bg-1); color: var(--fg); }

/* ====================  인사 점검 모달 (#hrInspectOverlay)  ==================== */
#hrInspectOverlay {
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] #hrInspectOverlay {
  background: rgba(0, 0, 0, .72) !important;
}
#hrInspectBox {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg);
}

.hi-head {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.hi-title { color: var(--primary) !important; }
.hi-sub   { color: var(--fg-muted) !important; }
.hi-close { color: var(--fg-muted) !important; }
.hi-close:hover { color: var(--danger) !important; }

.hi-yr {
  background: var(--primary-50) !important;
  border: 1px solid var(--primary-200) !important;
  color: var(--primary-700) !important;
}
:root[data-theme="dark"] .hi-yr {
  background: rgba(99,102,241,.18) !important;
  border-color: rgba(99,102,241,.30) !important;
  color: #C7D2FE !important;
}

.hi-tabs {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.hi-tab {
  color: var(--fg-muted) !important;
  border-bottom-color: transparent !important;
}
.hi-tab:hover { color: var(--fg) !important; }
.hi-tab.on {
  background: var(--bg-1) !important;
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.hi-desc {
  background: var(--bg-2) !important;
  border-left-color: var(--primary) !important;
  color: var(--fg-muted) !important;
}

.hi-lhdr {
  background: var(--bg-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--fg-muted) !important;
}
.hi-lrow { border-bottom-color: var(--border) !important; color: var(--fg) !important; }
.hi-lrow:hover { background: var(--bg-3) !important; }
.hi-list { border-color: var(--border) !important; }
.hi-more { color: var(--fg-muted) !important; border-top-color: var(--border) !important; }
.hi-more:hover { color: var(--primary) !important; }

.dept-row-hi  { border-bottom-color: var(--border) !important; color: var(--fg); }
.dept-bar-bg-hi { background: var(--bg-3) !important; }

.hi-bd-red    { background: #FEE2E2 !important; color: #991B1B !important; }
.hi-bd-yellow { background: #FEF3C7 !important; color: #92400E !important; }
.hi-bd-orange { background: #FFEDD5 !important; color: #9A3412 !important; }
.hi-bd-blue   { background: #DBEAFE !important; color: #1E40AF !important; }
.hi-bd-gray   { background: var(--bg-3) !important; color: var(--fg-muted) !important; }
:root[data-theme="dark"] .hi-bd-red    { background: rgba(248,113,113,.15) !important; color: #FCA5A5 !important; }
:root[data-theme="dark"] .hi-bd-yellow { background: rgba(251,191,36,.15)  !important; color: #FCD34D !important; }
:root[data-theme="dark"] .hi-bd-orange { background: rgba(251,146,60,.15)  !important; color: #FB923C !important; }
:root[data-theme="dark"] .hi-bd-blue   { background: rgba(147,197,253,.15) !important; color: #93C5FD !important; }
:root[data-theme="dark"] .hi-bd-gray   { background: rgba(100,116,139,.15) !important; color: #F1F5F9 !important; }

/* ====================  휴가 비교 모달 (#hrCmpBox)  ==================== */
#hrCmpOverlay {
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] #hrCmpOverlay {
  background: rgba(0, 0, 0, .7) !important;
}
#hrCmpBox {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg);
}
#hrCmpBox .hc-close { color: var(--fg-muted) !important; }
#hrCmpBox .hc-close:hover { color: var(--danger) !important; }
#hrCmpBox .hc-name { color: var(--fg) !important; }
#hrCmpBox .hc-sub  { color: var(--fg-muted) !important; }
#hrCmpBox .hc-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg);
}
#hrCmpBox th {
  color: var(--fg-muted) !important;
  border-bottom-color: var(--border) !important;
}
#hrCmpBox td {
  color: var(--fg) !important;
  border-bottom-color: var(--border) !important;
}
#hrCmpBox .hc-neg { color: var(--danger) !important; }
#hrCmpBox .hc-pos { color: var(--ok) !important; }
:root[data-theme="dark"] #hrCmpBox .hc-neg { color: #FCA5A5 !important; }
:root[data-theme="dark"] #hrCmpBox .hc-pos { color: #6EE7B7 !important; }

#hrCmpBox .hc-note {
  background: var(--primary-50) !important;
  border: 1px solid var(--primary-200) !important;
  color: var(--primary-700) !important;
}
:root[data-theme="dark"] #hrCmpBox .hc-note {
  background: rgba(251,191,36,.06)  !important;
  border-color: rgba(251,191,36,.2) !important;
  color: #FCD34D !important;
}

.hc-badge.hc-ok   { background: #D1FAE5 !important; color: #065F46 !important; }
.hc-badge.hc-warn { background: #FEF3C7 !important; color: #92400E !important; }
.hc-badge.hc-err  { background: #FEE2E2 !important; color: #991B1B !important; }
:root[data-theme="dark"] .hc-badge.hc-ok   { background: rgba(16,185,129,.15) !important; color: #34D399 !important; }
:root[data-theme="dark"] .hc-badge.hc-warn { background: rgba(251,191,36,.15) !important; color: #FBBF24 !important; }
:root[data-theme="dark"] .hc-badge.hc-err  { background: rgba(248,113,113,.15) !important; color: #FCA5A5 !important; }

.hc-sumcard {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
}
.hc-sumcard:hover,
.hc-sumcard.sel {
  background: var(--primary-50) !important;
  border-color: var(--primary) !important;
}
:root[data-theme="dark"] .hc-sumcard:hover,
:root[data-theme="dark"] .hc-sumcard.sel {
  background: rgba(99,102,241,.10) !important;
  border-color: rgba(99,102,241,.50) !important;
}

/* ====================  연차 발생 수정 모달 (#annVacOverlay)  ==================== */
#annVacOverlay {
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] #annVacOverlay {
  background: rgba(0, 0, 0, .72) !important;
}
#annVacBox {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg);
}
.av-close { color: var(--fg-muted) !important; }
.av-close:hover { color: var(--danger) !important; }
.av-name { color: var(--fg) !important; }
.av-sub  { color: var(--fg-muted) !important; }
.av-yr   { color: var(--fg) !important; }
.av-unit, .av-orig { color: var(--fg-muted) !important; }
.av-row  { border-bottom-color: var(--border) !important; }
.av-inp {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--fg) !important;
}
.av-inp:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.av-save {
  background: var(--primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(99,102,241,.3);
}
.av-save:hover { background: var(--primary-600) !important; }