/* ==========================================================================
   Overload Analysis v3 — Period-Based Capacity Monitor
   Zinc neutral + Emerald single accent
   Geist (display) / Noto Sans KR (body) / JetBrains Mono (data)
   ========================================================================== */

/* ── Dark (default) ── */
#tab-capacity {
  --cap-bg: #09090b;
  --cap-s: #18181b;
  --cap-s2: #27272a;
  --cap-s3: #3f3f46;
  --cap-bd: #27272a;
  --cap-t: #fafafa;
  --cap-t2: #a1a1aa;
  --cap-t3: #71717a;
  --cap-ac: #34d399;
  --cap-ac2: #059669;
  --cap-ac-bg: rgba(52,211,153,0.07);
  --cap-w: #fbbf24;
  --cap-w-bg: rgba(251,191,36,0.07);
  --cap-d: #f87171;
  --cap-d-bg: rgba(248,113,113,0.07);
  --cap-i: #38bdf8;
  --cap-r: 8px;
  --cap-r2: 12px;
  --cap-ff: 'Geist','Satoshi',system-ui,sans-serif;
  --cap-fb: 'Noto Sans KR','Geist',system-ui,sans-serif;
  --cap-fm: 'JetBrains Mono','Geist Mono',ui-monospace,monospace;
}
[data-theme="light"] #tab-capacity {
  --cap-bg: #fafafa;
  --cap-s: #fff;
  --cap-s2: #f4f4f5;
  --cap-s3: #e4e4e7;
  --cap-bd: #e4e4e7;
  --cap-t: #18181b;
  --cap-t2: #52525b;
  --cap-t3: #a1a1aa;
  --cap-ac: #059669;
  --cap-ac2: #047857;
  --cap-ac-bg: rgba(5,150,105,0.05);
  --cap-w: #d97706;
  --cap-w-bg: rgba(217,119,6,0.05);
  --cap-d: #dc2626;
  --cap-d-bg: rgba(220,38,38,0.05);
  --cap-i: #0284c7;
}

#tab-capacity { font-family: var(--cap-fb); color: var(--cap-t); }

/* ── Toolbar (date + status) ── */
.ov-toolbar {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ov-date-group {
  display: flex; align-items: center; gap: 6px;
  background: var(--cap-s); border: 1px solid var(--cap-bd);
  border-radius: var(--cap-r); padding: 4px 6px;
}
.ov-date-input {
  font-family: var(--cap-fm); font-size: 0.875rem;
  background: transparent; border: none; color: var(--cap-t);
  width: 165px; padding: 5px 8px; outline: none;
}
.ov-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
[data-theme="light"] .ov-date-input::-webkit-calendar-picker-indicator { filter: none; }
.ov-date-sep { color: var(--cap-t3); font-size: 0.75rem; }
.ov-quick-btns { display: flex; gap: 3px; }
.ov-qbtn {
  font-family: var(--cap-fm); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.04em; padding: 5px 10px;
  border: 1px solid var(--cap-bd); border-radius: 5px;
  cursor: pointer; background: transparent; color: var(--cap-t3);
  transition: all .15s;
}
.ov-qbtn:hover { color: var(--cap-t); border-color: var(--cap-s3); }
.ov-qbtn.active { background: var(--cap-ac-bg); color: var(--cap-ac); border-color: var(--cap-ac2); }

.ov-status {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 5px 14px;
  background: var(--cap-s); border: 1px solid var(--cap-bd);
  border-radius: var(--cap-r);
}
.ov-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ov-dot.ok { background: var(--cap-ac); }
.ov-dot.warn { background: var(--cap-w); animation: ov-pulse 2s infinite; }
.ov-dot.crit { background: var(--cap-d); animation: ov-pulse 1s infinite; }
@keyframes ov-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.ov-status-text {
  font-family: var(--cap-ff); font-size: 0.8125rem; font-weight: 700;
}
.ov-status-text.ok { color: var(--cap-ac); }
.ov-status-text.warn { color: var(--cap-w); }
.ov-status-text.crit { color: var(--cap-d); }

/* ── Summary Cards ── */
.ov-summary {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 1px; background: var(--cap-bd);
  border: 1px solid var(--cap-bd); border-radius: var(--cap-r2);
  overflow: hidden; margin-bottom: 1rem;
}
.ov-sum-cell {
  background: var(--cap-s); padding: .875rem 1rem;
}
.ov-sum-label {
  font-size: 0.6875rem; font-weight: 500; color: var(--cap-t3);
  margin-bottom: 4px;
}
.ov-sum-val {
  font-family: var(--cap-fm); font-size: 1.375rem; font-weight: 700;
  color: var(--cap-t); line-height: 1; letter-spacing: -.02em;
}
.ov-sum-unit {
  font-size: 0.625rem; font-weight: 500; color: var(--cap-t3); margin-left: 2px;
}
.ov-sum-sub {
  font-family: var(--cap-fm); font-size: 0.625rem; color: var(--cap-t3);
  margin-top: 3px;
}

/* ── Panel ── */
.ov-panel {
  background: var(--cap-s); border: 1px solid var(--cap-bd);
  border-radius: var(--cap-r2); margin-bottom: 1rem; overflow: hidden;
}
.ov-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem .625rem;
}
.ov-panel-title {
  font-family: var(--cap-ff); font-size: .8125rem; font-weight: 700;
  color: var(--cap-t); display: flex; align-items: center; gap: 6px;
}
.ov-panel-title .material-symbols-outlined { font-size: 14px; color: var(--cap-t3); }
.ov-panel-body { padding: 0 1.25rem 1.25rem; }

/* ── Chart container ── */
.ov-chart-wrap { position: relative; width: 100%; }
.ov-chart-wrap canvas { width: 100% !important; }

/* ── Two-column grid ── */
.ov-grid2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-bottom: 1rem;
}

/* ── Scatter empty ── */
.ov-empty {
  font-size: .75rem; color: var(--cap-t3); padding: 1rem;
  text-align: center;
}

/* ── Heatmap ── */
.ov-hm-grid { display: grid; gap: 1px; width: 100%; }
.ov-hm-cell {
  border-radius: 2px;
  min-height: 14px;
  cursor: pointer; transition: transform .1s;
}
.ov-hm-cell:hover { transform: scaleY(1.4); z-index: 1; }
.ov-hm-axis {
  display: flex; justify-content: space-between; padding-top: .25rem;
}
.ov-hm-lbl {
  font-family: var(--cap-fm); font-size: .5625rem; color: var(--cap-t3);
  letter-spacing: .04em;
}
.ov-hm-legend { display: flex; align-items: center; gap: 2px; margin-top: .25rem; }
.ov-hm-lg { width: 10px; height: 7px; border-radius: 1px; }

/* ── Bottleneck bars ── */
.ov-bn-row {
  display: grid; grid-template-columns: 72px 1fr 44px;
  align-items: center; gap: .625rem; padding: .375rem 0;
}
.ov-bn-row + .ov-bn-row { border-top: 1px solid var(--cap-bd); }
.ov-bn-label {
  font-family: var(--cap-fm); font-size: .625rem; font-weight: 600;
  color: var(--cap-t3); letter-spacing: .06em; text-align: right;
}
.ov-bn-track {
  height: 5px; background: var(--cap-s2); border-radius: 3px; overflow: hidden;
}
.ov-bn-fill {
  height: 100%; border-radius: 3px;
  transition: width .6s cubic-bezier(.16,1,.3,1), background .3s;
}
.ov-bn-val {
  font-family: var(--cap-fm); font-size: .75rem; font-weight: 700; text-align: right;
}
.ov-bn-row.top .ov-bn-label, .ov-bn-row.top .ov-bn-val { color: var(--cap-d); }

/* ── Correlation canvas ── */
.ov-corr-wrap { position: relative; }
#ov-corr-canvas { width: 100%; display: block; border-radius: var(--cap-r); }
.ov-corr-tip {
  display: none; position: absolute;
  background: var(--cap-s2); border: 1px solid var(--cap-s3);
  padding: .4rem .6rem; border-radius: var(--cap-r);
  font-size: .6875rem; color: var(--cap-t); pointer-events: none; z-index: 20;
  white-space: nowrap;
}
.ov-corr-tip strong { color: var(--cap-i); font-weight: 700; }

/* ── Timeline ── */
.ov-tl-bar {
  height: 24px; background: var(--cap-s2); border-radius: 4px;
  position: relative; overflow: hidden;
}
.ov-tl-seg {
  position: absolute; top: 0; bottom: 0; border-radius: 2px; cursor: pointer;
  transition: opacity .15s;
}
.ov-tl-seg:hover { opacity: .65; }
.ov-tl-seg.over { background: var(--cap-d); opacity: .45; }
.ov-tl-axis {
  display: flex; justify-content: space-between; margin-top: .25rem;
}
.ov-tl-lbl { font-family: var(--cap-fm); font-size: .5625rem; color: var(--cap-t3); }
.ov-tl-cnt { font-family: var(--cap-fm); font-size: .6875rem; font-weight: 700; color: var(--cap-d); }

/* ── Loading ── */
.ov-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; color: var(--cap-t3); font-size: .8125rem;
  gap: .5rem;
}
.ov-loading::before {
  content: ''; width: 14px; height: 14px;
  border: 2px solid var(--cap-bd); border-top-color: var(--cap-ac);
  border-radius: 50%; animation: ov-spin .6s linear infinite;
}
@keyframes ov-spin { to { transform: rotate(360deg); } }

/* ── Hourly Risk Bar ── */
.ov-risk-bar-row {
  display: grid; grid-template-columns: 32px 1fr 36px;
  align-items: center; gap: .5rem; padding: 2px 0;
}
.ov-risk-hour {
  font-family: var(--cap-fm); font-size: .625rem; color: var(--cap-t3);
  text-align: right;
}
.ov-risk-track {
  height: 10px; background: var(--cap-s2); border-radius: 2px; overflow: hidden;
}
.ov-risk-fill {
  height: 100%; border-radius: 2px;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.ov-risk-val {
  font-family: var(--cap-fm); font-size: .6875rem; font-weight: 600; text-align: right;
}

/* ── Insight card ── */
.ov-insight {
  display: flex; gap: .75rem; padding: .875rem 1rem;
  background: var(--cap-ac-bg); border-left: 2px solid var(--cap-ac);
  border-radius: 0 var(--cap-r) var(--cap-r) 0;
  margin-bottom: 1rem; font-size: .8125rem; line-height: 1.6;
  color: var(--cap-t);
}
.ov-insight-icon { color: var(--cap-ac); flex-shrink: 0; }
.ov-insight-icon .material-symbols-outlined { font-size: 16px; }
.ov-insight b { color: var(--cap-ac); font-weight: 700; }
.ov-insight.warn { background: var(--cap-w-bg); border-color: var(--cap-w); }
.ov-insight.warn b { color: var(--cap-w); }
.ov-insight.danger { background: var(--cap-d-bg); border-color: var(--cap-d); }
.ov-insight.danger b { color: var(--cap-d); }

/* ── Responsive ── */
@media (max-width:900px) {
  .ov-summary { grid-template-columns: repeat(3,1fr); }
  .ov-grid2 { grid-template-columns: 1fr; }
  .ov-toolbar { flex-direction: column; align-items: stretch; }
  .ov-status { margin-left: 0; }
}
@media (max-width:600px) {
  .ov-summary { grid-template-columns: repeat(2,1fr); }
}