/* Grafik interaktif PANTAU (public/pantau-charts.js). */

.pchart {
  --pc-ink: #14242e;
  --pc-ink-2: #42525c;
  --pc-muted: #72828c;
  --pc-grid: #e6ecee;
  --pc-surface: #ffffff;
  position: relative;
  min-width: 0;
}

.pchart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
  min-height: 30px;
}

.pchart-legend { display: flex; flex-wrap: wrap; gap: 6px; }

.pchart-legend-item,
.pchart-table-toggle,
.pchart-seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid #d7e0e4;
  border-radius: 999px;
  background: #fff;
  color: var(--pc-ink-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.pchart-legend-item i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pchart-legend-item:hover,
.pchart-table-toggle:hover,
.pchart-seg button:hover { border-color: #9fb3bd; background: #f5f8f9; }
.pchart-legend-item.off { opacity: .45; }
.pchart-legend-item.off span { text-decoration: line-through; }
.pchart-table-toggle.active,
.pchart-seg button.active { background: #0b5e8a; border-color: #0b5e8a; color: #fff; }
.pchart-legend-item:focus-visible,
.pchart-table-toggle:focus-visible,
.pchart-seg button:focus-visible,
.pchart-canvas svg:focus-visible,
[data-ptip]:focus-visible { outline: 2px solid #0b5e8a; outline-offset: 2px; }

.pchart-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.pchart-canvas { position: relative; width: 100%; }
.pchart-canvas svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.pchart-canvas svg:focus { outline: none; }

.pchart-grid line { stroke: var(--pc-grid); stroke-width: 1; }
.pchart-axis { fill: var(--pc-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pchart-panel-title { font-weight: 600; fill: var(--pc-ink-2); }
.pchart-baseline { stroke: #c9d4d9; stroke-width: 1; }
.pchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pchart-dot { stroke: var(--pc-surface); stroke-width: 1.5; }
.pchart-marker { stroke: var(--pc-surface); stroke-width: 2; pointer-events: none; }
.pchart-crosshair { stroke: #8fa2ab; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.pchart-direct { fill: var(--pc-ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pchart-volume { fill: #b9c7ce; transition: fill .12s; }
.pchart-volume.on { fill: #0b5e8a; }
.pchart-col { transition: opacity .12s; }
.pchart-col.dim > path,
.pchart-col.dim > rect:not(.pchart-hit),
.pchart-col.dim > text { opacity: .35; }

.pchart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  min-width: 170px;
  max-width: 280px;
  padding: 9px 11px;
  border: 1px solid #d7e0e4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(7, 43, 61, .16);
  color: var(--pc-ink, #14242e);
  font-size: 12px;
  pointer-events: none;
}
.pchart-tip-floating { position: fixed; z-index: 2000; }
.pchart-tip-title { margin-bottom: 6px; font-weight: 700; color: #14242e; }
.pchart-tip-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 2px 0; color: #42525c; }
.pchart-tip-row i { width: 10px; height: 10px; border-radius: 3px; }
.pchart-tip-row i.blank { background: transparent; }
.pchart-tip-row b { color: #14242e; font-variant-numeric: tabular-nums; }
.pchart-tip-row.strong { margin-top: 3px; padding-top: 5px; border-top: 1px solid #e6ecee; }

.pchart-table { margin-top: 10px; }
.pchart-table-scroll { max-height: 260px; overflow: auto; border: 1px solid #e0e7ea; border-radius: 10px; }
.pchart-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pchart-table th,
.pchart-table td { padding: 6px 10px; border-bottom: 1px solid #edf1f3; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pchart-table thead th { position: sticky; top: 0; background: #f4f7f8; color: #42525c; font-weight: 700; }
.pchart-table tbody th { text-align: left; font-weight: 600; color: #14242e; }

/* ---- baris daftar yang bisa diklik / disorot ---------------------------- */
.pchart-row-action { cursor: pointer; border-radius: 10px; transition: background .15s, box-shadow .15s; }
.pchart-row-action:hover { background: #f1f6f8; }
.pchart-row-action.is-selected { background: #e3f0f7; box-shadow: inset 3px 0 0 #0b5e8a; }
[data-ptip] { outline-offset: 2px; }

.pchart-hint { display: block; margin-top: 6px; color: #72828c; font-size: 11px; }

/* ---- Distribusi WT/WL ---------------------------------------------------- */
.wtwl-dist-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.wtwl-dist-summary div { padding: 8px 10px; border-radius: 10px; background: #f4f7f8; }
.wtwl-dist-summary span { display: flex; align-items: center; gap: 6px; color: #42525c; font-size: 11px; font-weight: 600; }
.wtwl-dist-summary span i { width: 9px; height: 9px; border-radius: 3px; }
.wtwl-dist-summary strong { display: block; font-size: 18px; color: #14242e; font-variant-numeric: tabular-nums; }
.wtwl-dist-summary small { color: #72828c; font-size: 11px; }

/* ---- Komposisi layanan WT-WL -------------------------------------------- */
.wtwl-svc-list { display: grid; gap: 4px; }
.wtwl-svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}
.wtwl-svc-row strong { overflow: hidden; color: #14242e; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wtwl-svc-row .track { position: relative; height: 8px; border-radius: 999px; background: #edf1f3; overflow: hidden; }
.wtwl-svc-row .track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #0b5e8a; }
.wtwl-svc-row b { min-width: 58px; color: #14242e; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Komposisi tiket: kartu jadi tombol filter -------------------------- */
.complaint-kind-list > [data-complaint-kind-toggle] { cursor: pointer; transition: opacity .15s, background .15s; border-radius: 12px; }
.complaint-kind-list > [data-complaint-kind-toggle]:hover { background: #f4f7f8; }
.complaint-kind-list > [data-complaint-kind-toggle].is-off { opacity: .45; }
.complaint-kind-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }

@media (max-width: 640px) {
  .pchart-legend-item, .pchart-table-toggle, .pchart-seg button { min-height: 34px; }
  .wtwl-dist-summary { grid-template-columns: 1fr; }
}