/* overview module styles (agent A): Overview page and Live activity page; every class starts with .ov- */
.ov-kpis { margin-bottom: 16px; }
.ov-kpi .ov-kv { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 8px; }
.ov-kpi .val { white-space: nowrap; }
.ov-spark { flex: none; margin-bottom: 8px; overflow: visible; }
.ov-spark polyline { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ov-swimcard, .ov-tcard, .ov-evcard { margin-bottom: 16px; }
.ov-swimcard .xf-head { margin-bottom: 6px; }

/* swimlane */
.ov-swim { position: relative; }
.ov-svg { min-height: 64px; }
.ov-svg svg { display: block; overflow: visible; }
.ov-grid { stroke: var(--hair2); stroke-width: 1; }
.ov-tick { font-size: 11px; fill: var(--muted); }
.ov-future { fill: var(--added); }
.ov-nowl { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 3; }
.ov-nowt { font-size: 11px; font-weight: 700; fill: var(--ink); }
.ov-hit { fill: transparent; }
.ov-lane { cursor: pointer; outline: none; }
.ov-lane:hover .ov-hit { fill: var(--added); }
.ov-lane .ov-hit.on, .ov-lane.on .ov-hit { fill: var(--acc-t); }
.ov-lane:focus-visible .ov-hit { stroke: var(--acc); stroke-width: 2; }
.ov-ll { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.ov-lj { font-size: 11.5px; font-weight: 400; fill: var(--muted); }
.ov-b { stroke: #fff; stroke-width: 1; }
.ov-b-build { fill: var(--acc-l); background: var(--acc-l); }
.ov-b-solve { fill: var(--info); background: var(--info); }
.ov-b-write { fill: var(--plain-d); background: var(--plain-d); }
.ov-b.fin { opacity: .45; }
.ov-bt { font-size: 11px; font-weight: 600; pointer-events: none; }
.ov-bt-solve { fill: #fff; } .ov-bt-build, .ov-bt-write { fill: var(--gd); }
.ov-mk { cursor: default; }
.ov-mk.on > :first-child { stroke: var(--ink); stroke-width: 2; }
.ov-g-plan { fill: var(--acc-d); stroke: #fff; stroke-width: 1.5; }
.ov-g-sub { fill: #fff; stroke: var(--gd); stroke-width: 1.5; }
.ov-g-bound { fill: #fff; stroke: var(--gd); stroke-width: 1.6; }
.ov-g-done { fill: var(--acc-d); stroke: #fff; stroke-width: 1.5; }
.ov-g-bad { fill: var(--loss); stroke: #fff; stroke-width: 1.5; }
.ov-g-warn { fill: #B07A00; stroke: #fff; stroke-width: 1.5; }
.ov-g-ctrl { fill: var(--gd); stroke: #fff; stroke-width: 1.5; }
.ov-g-ic { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ov-g-info { fill: var(--plain-d); }
.ov-empty { font-size: 13px; fill: var(--muted); }
.ov-tip { position: absolute; z-index: 5; min-width: 200px; max-width: 320px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-md);
  box-shadow: var(--sh-pop); padding: 9px 12px; font-size: 12.5px; pointer-events: none; }
.ov-tip-h { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ov-tip-e { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start; padding: 2px 0; line-height: 1.35; }
.ov-tip-e b { font-weight: 600; }
.ov-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair2); }
.ov-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ov-rest:empty { display: none; }
.ov-rl { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.ov-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--ink2); margin-left: auto; }
.ov-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ov-legend .ov-lgap { width: 1px; height: 14px; background: var(--hair); }
.kico.ov-k-sub { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-7.5 -7.5 15 15'%3E%3Ccircle r='3.2' fill='%23fff' stroke='%23123627' stroke-width='1.5'/%3E%3C/svg%3E"); }
.ov-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }

/* worker table */
.ov-wn { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov-wn .w-name { margin-right: 2px; }
.ov-t td { padding-top: 9px; padding-bottom: 9px; }
.ov-jn { display: block; font-weight: 500; white-space: nowrap; }
.c-now { min-width: 280px; }
.ov-now { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.ov-nt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ov-nd { color: var(--ink2); }
.ov-nd::before { content: "· "; color: var(--muted); }
.ov-age { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 12px; }
.ov-now.ov-t-muted .ov-nt { color: var(--muted); font-weight: 500; }
.ov-now.ov-t-bad .ov-nt { color: var(--loss); }
.ov-ph { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ov-mini { display: inline-flex; width: 72px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; flex: none; }
.ov-mini i { display: block; height: 100%; }
tr.ov-row.ov-open td { background: var(--acc-t); }
tr.ov-row.ov-open td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
tr.ov-dprow > td { padding: 0 0 12px; background: var(--acc-t); border-bottom: 1px solid var(--hair); }
tr.ov-dprow:hover td { background: var(--acc-t); }

/* inline detail panel */
.ov-dp { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 16px 18px; margin: 0 12px; box-shadow: var(--sh-card); }
#ov-dp-c:empty { display: none; }
#ov-dp-c { margin: -8px 0 16px; }
#ov-dp-c .ov-dp { margin: 0; border-color: var(--acc-l); }
.ov-dp-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.ov-dp-id { flex: 1 1 260px; min-width: 0; }
.ov-dp-n { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ov-dp-job { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-dp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ov-dp-acts #ov-stop { margin-left: 8px; }
.ov-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); }
.ov-x:hover { background: var(--page); color: var(--ink); }
.ov-x path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ov-dp-lock { font-size: 12.5px; color: var(--ns-t); margin-top: 6px; }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.ov-stats:empty { display: none; }
.ov-stats div { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: var(--r-md); background: var(--page); }
.ov-stats span { font-size: 12px; color: var(--muted); }
.ov-stats b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ov-stats b .u { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ov-dp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; margin-top: 12px; }
.ov-dp .ov-h { font-size: 15px; font-weight: 600; margin: 0; }
.ov-q { font-size: 13.5px; color: var(--ink2); margin: 2px 0 8px; }
.ov-axis { stroke: var(--hair); }
.ov-garea { fill: var(--info-t); }
.ov-gline { fill: none; stroke: var(--info); stroke-width: 2; }
.ov-gdot { fill: var(--info); stroke: #fff; stroke-width: 1.5; }
.ov-gval { font-size: 12px; font-weight: 700; fill: var(--ink); }
.ov-none { padding: 18px 4px; color: var(--muted); font-size: 13px; list-style: none; }

/* event feeds: shared .feed > .ev (base.css); only scroll box and layout here */
.ov-feed { max-height: 236px; overflow-y: auto; border-top: 1px solid var(--hair2); padding-top: 4px; }
.ov-feed.line { padding-left: 8px; padding-right: 8px; }
.ov-feed.big { max-height: 540px; }
.ov-feed .ev:not(.ev-ctrl) { border-bottom: 1px solid var(--hair2); }
.ov-evfeed .ev:not(.ev-ctrl) { padding-left: 4px; padding-right: 4px; }
.ov-evfeed { padding-left: 8px; padding-right: 8px; }
.ov-evfeed .ev-w { display: inline-block; min-width: 104px; }
.ov-chips { margin-bottom: 12px; align-items: center; }
.ov-chips .ov-chipgo { margin-left: auto; }
.ov-cd { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--plain-d); }
.ov-cd.st-running { background: var(--info); } .ov-cd.st-paused, .ov-cd.st-pausing { background: var(--ns-t); }

/* bottom row */
.ov-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.ov-jl { font-size: 12px; color: var(--ink2); gap: 12px; }
.ov-jl span { display: inline-flex; align-items: center; gap: 5px; }
.ov-jl i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ov-jdev { fill: var(--acc-l); } .ov-jprd { fill: var(--acc-d); }

@media (max-width: 1100px) { .ov-bottom { grid-template-columns: minmax(0, 1fr); } .ov-dp-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ov-legend { margin-left: 0; }
  .ov-dp { margin: 0; padding: 14px; }
}
@media (max-width: 600px) {   /* rows stay a grid; line 1 = title, line 2 = worker tag · detail */
  .ov-evfeed .ev { grid-template-columns: 62px 15px minmax(0, 1fr); gap: 0 8px; }
  .ov-evfeed .ev-b { display: flex; flex-wrap: wrap; align-items: baseline; }
  .ov-evfeed .ev-title { order: 0; flex-basis: 100%; }
  .ov-evfeed .ev-w { order: 1; min-width: 0; margin: 1px 0 0; font-weight: 500; }
  .ov-evfeed .ev-d { order: 2; min-width: 0; }
}