/* ═══ TEAM MONITORING → PLAN — assets/capacity-plan.js. Scoped to
   #capacity-plan-view (plus the floating .cpl-pop); reads the v2 tokens from
   assets/lv2.css. A helicopter view on purpose (his ask, 2026-10-26: "gaperlu
   sebanyak ini metrics per project"; KPI cards dropped 2026-10-27, "langsung
   list aja"): a card is name · hours, an Expectation
   dot and at most two tags; the rest is in its hover title or click popover.
   The columns wrap to the width instead of scrolling sideways, so the whole
   team is on one screen. */

#capacity-plan-view .cap-head{display:flex;align-items:flex-start;gap:24px;margin:2px 0 16px}
#capacity-plan-view .cap-head__l{flex:1;min-width:0}
#capacity-plan-view .cap-sp{flex:1}
#capacity-plan-view .cap-flash{font-size:12px;font-weight:700;color:#15803D;background:var(--lv-success-soft);border-radius:var(--lv-r-pill);padding:4px 10px;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#capacity-plan-view .cap-flash.is-bad{color:var(--lv-danger-ink);background:var(--lv-danger-soft)}
#capacity-plan-view .cap-preview{font-size:11px;font-weight:700;color:var(--lv-warning-ink);background:var(--lv-warning-soft);border-radius:var(--lv-r-pill);padding:4px 10px}

/* toolbar */
#capacity-plan-view .cpl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#capacity-plan-view .cpl-pick{min-width:220px;max-width:320px}
#capacity-plan-view .cpl-name{width:200px}
#capacity-plan-view .cpl-confirm{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--lv-danger-ink)}
#capacity-plan-view .tbtn.is-danger{color:var(--lv-danger-ink);border-color:#FCA5A5;background:var(--lv-danger-soft)}

/* what changed */
#capacity-plan-view .cpl-changes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--lv-border-soft);border-radius:var(--lv-r-md);background:#FAFCFF}
#capacity-plan-view .cpl-changes.is-empty{font-size:12px;color:var(--lv-muted)}
#capacity-plan-view .cpl-changes__t{font-size:12px;font-weight:700;color:var(--lv-text);margin-right:4px}
#capacity-plan-view .cpl-chg{font-size:11.5px;font-weight:600;color:var(--lv-text);background:#fff;border:1px solid var(--lv-border);border-radius:var(--lv-r-pill);padding:3px 10px;white-space:nowrap}
#capacity-plan-view .cpl-chg span{color:var(--lv-muted);font-weight:500}
#capacity-plan-view .cpl-chg--add,#capacity-plan-view .cpl-chg--hire{border-color:#BFDBFE;background:var(--lv-soft)}
#capacity-plan-view .cpl-chg--leave{border-color:#FECACA;background:var(--lv-danger-soft)}
#capacity-plan-view .cpl-note{font-size:12px;color:var(--lv-muted);margin:0 0 12px}
#capacity-plan-view .cpl-note.is-bad{color:var(--lv-danger-ink)}

#capacity-plan-view .cpl-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:11.5px;color:var(--lv-muted);margin:0 0 0 6px;cursor:help}
#capacity-plan-view .cpl-legend__i{color:var(--lv-faint)}
#capacity-plan-view .cpl-legend span{display:inline-flex;align-items:center;gap:5px}
#capacity-plan-view .cpl-legend i{width:8px;height:8px;border-radius:50%}
#capacity-plan-view .cpl-legend__h{color:var(--lv-faint)}

/* the board: columns wrap, no sideways scroll */
#capacity-plan-view .cpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--lv-gap);align-items:start}
#capacity-plan-view .cpl-col{background:var(--lv-surface);border:1px solid var(--lv-border-soft);border-radius:var(--lv-r-lg);box-shadow:var(--lv-shadow);padding:12px;min-width:0;transition:border-color var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease)}
#capacity-plan-view .cpl-col.is-over{border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
#capacity-plan-view .cpl-col--sim{border-style:dashed;border-color:#93C5FD}
#capacity-plan-view .cpl-col--none{background:#FAFAFA}
#capacity-plan-view .cpl-col.is-leaving{opacity:.6}
/* Drop Projects: a dashed red bin; what sits there reads as let go */
#capacity-plan-view .cpl-col--drop{border-style:dashed;border-color:#FCA5A5;background:#FFFAFA}
#capacity-plan-view .cpl-col--drop .cpl-card__n,#capacity-plan-view .cpl-col--drop .cpl-card__h{color:var(--lv-muted)}
#capacity-plan-view .cpl-col--drop .cpl-card__n{text-decoration:line-through;text-decoration-color:#FCA5A5}
#capacity-plan-view .cpl-col__hd{display:flex;align-items:center;gap:10px;border-radius:var(--lv-r-sm)}
#capacity-plan-view .cpl-col__hd.is-ed{cursor:pointer}
#capacity-plan-view .cpl-col__hd.is-ed:hover .cpl-col__nm b{color:var(--lv-primary)}
#capacity-plan-view .cpl-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:#CBD5E1;overflow:hidden}
#capacity-plan-view .cpl-av img{width:100%;height:100%;object-fit:cover}
#capacity-plan-view .cpl-av.is-sim{background:var(--lv-soft);color:var(--lv-primary);border:1px dashed #93C5FD}
#capacity-plan-view .cpl-av.is-none{background:#F1F5F9;color:var(--lv-faint)}
#capacity-plan-view .cpl-av.is-drop{background:var(--lv-danger-soft);color:var(--lv-danger-ink);font-size:16px}
#capacity-plan-view .cpl-col__nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#capacity-plan-view .cpl-col__nm b{font-size:12.5px;font-weight:700;color:var(--lv-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#capacity-plan-view .cpl-col__nm small{font-size:11px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
#capacity-plan-view .cpl-col__pct{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
#capacity-plan-view .cpl-col__pct.is-ok{color:var(--lv-success-ink)}
#capacity-plan-view .cpl-col__pct.is-tight{color:var(--lv-warning-ink)}
#capacity-plan-view .cpl-col__pct.is-over{color:var(--lv-danger-ink)}
#capacity-plan-view .cpl-meter{height:6px;border-radius:var(--lv-r-pill);background:#EEF2F7;overflow:hidden;margin:10px 0 0}
#capacity-plan-view .cpl-meter i{display:block;height:100%;border-radius:inherit;transition:width var(--lv-normal) var(--lv-ease)}
#capacity-plan-view .cpl-meter i.is-ok{background:var(--lv-success)}
#capacity-plan-view .cpl-meter i.is-tight{background:var(--lv-warning)}
#capacity-plan-view .cpl-meter i.is-over{background:var(--lv-danger)}
#capacity-plan-view .cpl-col__d{font-size:11px;font-weight:700;margin:6px 0 0}
#capacity-plan-view .cpl-col__d.is-up{color:var(--lv-danger-ink)}
#capacity-plan-view .cpl-col__d.is-dn{color:var(--lv-success-ink)}
#capacity-plan-view .cpl-col__cards{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;min-height:32px}
#capacity-plan-view .cpl-col__empty{font-size:11.5px;color:var(--lv-faint);padding:8px 2px}

/* a card: dot · name · tags · hours */
#capacity-plan-view .cpl-card{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:var(--lv-r-sm);border:1px solid var(--lv-border-soft);background:#fff;font-size:12px;color:var(--lv-text);min-width:0}
#capacity-plan-view .cpl-card.is-ed{cursor:grab}
#capacity-plan-view .cpl-card.is-ed:hover{border-color:#BFDBFE;background:#F8FBFF}
#capacity-plan-view .cpl-card.is-drag{opacity:.4}
#capacity-plan-view .cpl-card.is-moved{border-color:#93C5FD;background:var(--lv-soft)}
#capacity-plan-view .cpl-card.is-hyp{border-style:dashed;border-color:#93C5FD}
#capacity-plan-view .cpl-card__dot{flex:none;width:8px;height:8px;border-radius:50%}
#capacity-plan-view .cpl-card__n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
#capacity-plan-view .cpl-card__n em{font-style:normal;color:var(--lv-faint)}
#capacity-plan-view .cpl-card__h{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lv-body)}
#capacity-plan-view .cpl-tag{flex:none;font-size:10px;font-weight:700;border-radius:var(--lv-r-pill);padding:1px 6px}
#capacity-plan-view .cpl-tag--ag{color:#0369A1;background:#E0F2FE}
#capacity-plan-view .cpl-tag--new{color:var(--lv-primary);background:var(--lv-soft)}

/* popover (on body, outside the root) */
.cpl-pop{position:fixed;z-index:1200;width:400px;max-width:calc(100vw - 16px);background:#fff;border:1px solid var(--lv-border,#E5E7EB);border-radius:14px;box-shadow:var(--lv-shadow-float,0 16px 50px rgba(15,23,42,.14));padding:14px;display:flex;flex-direction:column;gap:8px}
.cpl-pop__t{font-size:12.5px;font-weight:700;color:var(--lv-text,#0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpl-pop__s{font-size:11px;color:var(--lv-muted,#64748B);line-height:1.45}
/* five Expectation levels on one line — a wrapped segment overflowed its own box onto the next label */
/* every cell of a row the same width (his note, 2026-10-27) */
/* every cell of a row the same width (his note, 2026-10-27). The control tokens in lv2.css pin
   .lgc-seg to inline-flex and its cells to 14px padding with !important, so this has to as well. */
.cpl-pop .lgc-seg.cpl-pop__seg{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
.cpl-pop .lgc-seg.cpl-pop__seg button{padding:0 6px !important;white-space:nowrap;min-width:0}
.cpl-pop__acts{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.cpl-form{display:flex;flex-direction:column;gap:8px}
.cpl-form label{display:flex;flex-direction:column;gap:4px}
.cpl-form .ui-inp,.cpl-form .ui-sel{width:100%}
.cpl-form__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

@media (max-width:767px){ #capacity-plan-view .cpl-grid{grid-template-columns:1fr} #capacity-plan-view .cpl-pick{min-width:0;flex:1} }