/* ═══════════════════════════════════════════════════════════════
   Manzoma Pipeline Page Styles
   Phase 2 split: page-specific styles extracted from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PIPELINE GANTT (خط المنتج) — جدول زمني احترافي
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   TIMELINE / خط المنتج — Task-based Gantt
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SINGLE-LINE TIMELINE  (خط المنتج)
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   XTL — Professional Timeline CSS  v2
   ─────────────────────────────────────────────────────────────── */

#page-pipeline {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; padding: 0;
  background: #f1f5f9; overflow: hidden;
}

/* ── Topbar ─────────────────────────────────────────────────── */
/* ── Filter bar ─────────────────────────────────────────────── */
/* Active filter chips */
/* Toggle chips + legend */
/* ── Stats bar ──────────────────────────────────────────────── */
/* ── Canvas ─────────────────────────────────────────────────── */
/* ── Grid ───────────────────────────────────────────────────── */
/* ── Axis ticks ─────────────────────────────────────────────── */
/* ── Arrow ──────────────────────────────────────────────────── */
/* ── Today needle ───────────────────────────────────────────── */
/* ── Maturity stage bars ────────────────────────────────────── */
/* ── Pins ───────────────────────────────────────────────────── */
/* ── Date tick ──────────────────────────────────────────────── */
/* ── Connector ──────────────────────────────────────────────── */
/* ── Label cards ────────────────────────────────────────────── */
/* Mini chips */
/* ── States ─────────────────────────────────────────────────── */
/* ── Tooltip ────────────────────────────────────────────────── */
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* placeholder — no overrides needed at this breakpoint */
}

/* Mobile modal */
@media (max-width: 600px) {
  .pl-modal { width: 96%; max-height: 92vh; }
  .pl-bulk-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .pl-bulk-select { min-width: unset; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PIPELINE — خط المنتج
═══════════════════════════════════════════════════════════════ */

/* Toolbar */
.pipeline-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;background:var(--s0);
  border-bottom:1px solid var(--b0);border-radius:var(--r2);
  margin-bottom:16px;box-shadow:var(--sh1);
}
.pipeline-view-switcher{
  display:flex;background:var(--s2);border-radius:8px;padding:3px;gap:2px;
}
.pl-view-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:6px;border:none;
  font-size:12px;font-weight:600;font-family:var(--ff);
  color:var(--t3);background:transparent;cursor:pointer;
  transition:all .15s;
}
.pl-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:var(--sh1)}
.pipeline-stage-filter{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.pl-stage-btn{
  padding:5px 12px;border-radius:20px;border:1.5px solid var(--b1);
  background:var(--s0);font-size:11px;font-weight:600;font-family:var(--ff);
  color:var(--t3);cursor:pointer;transition:all .13s;
}
.pl-stage-btn.active{background:var(--g3);color:#fff;border-color:var(--g3)}
.pl-refresh-btn{
  width:34px;height:34px;border-radius:8px;
  border:1.5px solid var(--b1);background:var(--s0);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t3);transition:all .13s;flex-shrink:0;
}
.pl-refresh-btn:hover{background:var(--g5);color:var(--g3)}
.pl-view{min-height:300px}
.pl-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:48px;color:var(--t4);font-size:14px;
}

/* ── Kanban Board ─────────────────────────────────────────── */
.pl-kanban-board{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;align-items:start;
}
@media(max-width:900px){.pl-kanban-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.pl-kanban-board{grid-template-columns:1fr}}

.pl-column{
  background:var(--col-bg,var(--s1));
  border:1.5px solid var(--col-color,var(--b0));
  border-top:3px solid var(--col-color,var(--g3));
  border-radius:var(--r2);overflow:hidden;
}
.pl-col-hd{
  display:flex;align-items:center;gap:7px;
  padding:10px 13px;background:rgba(255,255,255,.5);
  border-bottom:1px solid var(--b0);
}
.pl-col-icon{font-size:16px}
.pl-col-label{font-size:13px;font-weight:800;color:var(--t1);flex:1}
.pl-col-cnt{
  font-size:11px;font-weight:700;background:var(--col-color);
  color:#fff;padding:2px 8px;border-radius:10px;
}
.pl-col-cards{display:flex;flex-direction:column;gap:8px;padding:10px}
.pl-empty-col{font-size:12px;color:var(--t4);text-align:center;padding:16px;font-style:italic}

/* Pipeline card */
.pl-card{
  background:var(--s0);border:1.5px solid var(--b0);
  border-radius:8px;padding:12px;
  cursor:pointer;transition:all .15s;
}
.pl-card:hover{border-color:var(--col-color,var(--g4));box-shadow:var(--sh2);transform:translateY(-1px)}
.pl-card-top{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}
.pl-card-name{
  flex:1;font-size:13px;font-weight:700;color:var(--t1);
  line-height:1.4;
}
.pl-cu-link{
  color:var(--t4);transition:color .12s;flex-shrink:0;padding:2px;
}
.pl-cu-link:hover{color:var(--g3)}
.pl-card-dur{font-size:11px;color:var(--t4);margin-bottom:8px}
.pl-card-progress{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pl-card-prog-bar{
  flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden;
}
.pl-card-prog-fill{height:100%;border-radius:4px;transition:width .6s}
.pl-card-prog-pct{font-size:11px;font-weight:700;color:var(--t3);min-width:28px;text-align:left}
.pl-card-meta{display:flex;gap:8px}
.pl-card-tasks{font-size:11px;color:var(--t4)}

/* ── Timeline View ────────────────────────────────────────── */
.pl-timeline-wrap{overflow-x:auto;min-height:200px}
.pl-tl-header{
  display:flex;border-bottom:1.5px solid var(--b0);
  margin-bottom:4px;position:sticky;top:0;background:var(--s0);z-index:2;
}
.pl-tl-label-col{
  width:160px;min-width:160px;flex-shrink:0;
  font-size:11px;font-weight:700;color:var(--t4);padding:6px 8px;
  border-left:1px solid var(--b0);
}
.pl-tl-months{flex:1;position:relative;height:28px;min-width:600px}
.pl-tl-month{
  position:absolute;font-size:10px;color:var(--t4);
  white-space:nowrap;transform:translateX(-50%);top:6px;
}
.pl-tl-month::before{
  content:'';position:absolute;top:-6px;left:50%;
  width:1px;height:4px;background:var(--b1);
}
.pl-tl-dur-col{
  width:56px;min-width:56px;flex-shrink:0;
  font-size:10px;font-weight:700;color:var(--t4);
  padding:6px 4px;text-align:center;
}

.pl-tl-rows{display:flex;flex-direction:column;gap:3px}
.pl-tl-row{
  display:flex;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--b0);
  cursor:pointer;transition:background .1s;border-radius:4px;
}
.pl-tl-row:hover{background:var(--g6)}
.pl-tl-row .pl-tl-label-col{
  font-size:12px;font-weight:600;color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:none;
}
.pl-tl-track{
  flex:1;position:relative;height:28px;min-width:600px;
  background:var(--s2);border-radius:4px;overflow:hidden;
}
.pl-tl-bar{
  position:absolute;top:4px;height:20px;border-radius:4px;
  display:flex;align-items:center;overflow:hidden;
  cursor:pointer;transition:opacity .15s;
  min-width:20px;
}
.pl-tl-bar:hover{opacity:1!important;filter:brightness(1.1)}
.pl-tl-bar-label{
  font-size:10px;font-weight:700;color:#fff;
  white-space:nowrap;padding:0 6px;text-shadow:0 1px 2px rgba(0,0,0,.2);
  overflow:hidden;text-overflow:ellipsis;
}
.pl-tl-current{
  animation:pulse-border 2s infinite;
  box-shadow:0 0 0 2px rgba(245,158,11,.4);
}
@keyframes pulse-border{
  0%,100%{box-shadow:0 0 0 2px rgba(245,158,11,.3)}
  50%{box-shadow:0 0 0 4px rgba(245,158,11,.15)}
}
.pl-tl-row .pl-tl-dur-col{
  font-size:11px;font-weight:600;color:var(--t3);text-align:center;
}

/* ── Add task modal — task type (main/subtask) ──────────────── */
.f-task-type-row{
  display:flex;gap:12px;flex-wrap:wrap;
}
.f-type-opt{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--t2);cursor:pointer;
  padding:6px 12px;border-radius:8px;
  border:1.5px solid var(--b1);background:var(--s0);
  transition:all .12s;
}
.f-type-opt:has(input:checked){
  border-color:var(--g3);background:var(--g5);color:var(--g2);font-weight:600;
}
.f-type-opt input{display:none}

/* ── Subtask badge in task list ─────────────────────────────── */
.tc-sub-badge{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;color:var(--t4);
  margin-left:3px;opacity:.8;
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE v2 — رحلة المنتج (Product Journey)
   مفهوم → نموذج → منتج → مشروع
═══════════════════════════════════════════════════════════════ */

/* ── 1. Header ─────────────────────────────────────────────── */
.pl2-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.pl2-header-l h2{font-size:var(--fz-xl);font-weight:800;color:var(--t1);letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp2)}
.pl2-header-l p{font-size:var(--fz-sm);color:var(--t3);margin-top:4px}
.pl2-header-r{display:flex;align-items:center;gap:var(--sp2)}

/* ── 2. Pulse strip (4 metrics) ───────────────────────────── */
.pl2-pulse{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp3);
  width:100%;
  padding:var(--sp4) var(--sp5);
  background:linear-gradient(135deg,var(--g1) 0%,#0A2016 100%);
  border-radius:var(--r);box-shadow:var(--sh2);
  position:relative;overflow:hidden;
}
.pl2-pulse::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(16,185,129,.12) 0%,transparent 50%);
  pointer-events:none;
}
.pl2-pulse-item{display:flex;align-items:center;gap:var(--sp3);position:relative;z-index:1;padding-inline:var(--sp3);border-inline-start:1px solid rgba(255,255,255,.08)}
.pl2-pulse-item:first-child{border-inline-start:none}
.pl2-pulse-ic{width:42px;height:42px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;border:1px solid rgba(255,255,255,.10)}
.pl2-pulse-ic-total{background:rgba(255,255,255,.08)}
.pl2-pulse-ic-new{background:rgba(16,185,129,.20);color:#6EE7B7;border-color:rgba(16,185,129,.30)}
.pl2-pulse-ic-up{background:rgba(10,102,166,.22);color:#7BC4F5;border-color:rgba(10,102,166,.32)}
.pl2-pulse-ic-pause{background:rgba(168,90,4,.22);color:#FBBF6E;border-color:rgba(168,90,4,.32)}
.pl2-pulse-body{flex:1;min-width:0}
.pl2-pulse-val{font-size:var(--fz-xl);font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pl2-pulse-lbl{font-size:var(--fz-xs);color:rgba(255,255,255,.65);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ── 3. Toolbar (search + filters + view switch) ──────────── */
.pl2-toolbar{
  display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
  padding:var(--sp3) var(--sp4);box-shadow:var(--sh1);
}
.pl2-search-wrap{flex:1;min-width:220px;display:flex;align-items:center;gap:var(--sp2);background:var(--s1);border:1.5px solid var(--b1);border-radius:var(--r3);padding:9px 13px;transition:border-color .15s,box-shadow .15s,background .15s}
.pl2-search-wrap:focus-within{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.pl2-search-wrap svg{color:var(--t4);flex-shrink:0}
.pl2-search-wrap input{flex:1;border:none;background:transparent;font-size:var(--fz-base);color:var(--t1);outline:none;font-family:var(--ff);min-height:24px}
.pl2-select{padding:9px 13px;border:1.5px solid var(--b1);border-radius:var(--r3);background:var(--s1);font-family:var(--ff);font-size:var(--fz-base);color:var(--t1);cursor:pointer;min-height:42px;outline:none;transition:border-color .15s,background .15s}
.pl2-select:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.pl2-adv-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--r3);border:1.5px solid var(--b1);background:var(--s1);font-size:var(--fz-sm);font-weight:600;color:var(--t3);cursor:pointer;transition:background .14s,border-color .14s,color .14s;min-height:42px;font-family:var(--ff)}
.pl2-adv-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.pl2-adv-btn.has-filters{border-color:var(--g3);background:var(--g5);color:var(--g3)}
.pl2-adv-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--red);color:#fff;border-radius:9px;font-size:var(--fz-xs);font-weight:800}
.pl2-view-grp{display:flex;background:var(--s2);border-radius:var(--r3);padding:3px;gap:2px;margin-inline-start:auto}
.pl2-view-btn{padding:7px 13px;font-size:var(--fz-sm);font-weight:600;color:var(--t3);background:transparent;border:none;border-radius:var(--r4);cursor:pointer;transition:background .14s,color .14s;font-family:var(--ff);display:inline-flex;align-items:center;gap:5px;min-height:32px}
.pl2-view-btn:hover{color:var(--t1)}
.pl2-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:700}

/* Advanced panel (collapsible) */
.pl2-adv-panel{display:none;padding:var(--sp4);background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);box-shadow:var(--sh1);margin-top:calc(-1 * var(--sp3))}
.pl2-adv-panel.open{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp3)}
.pl2-adv-group{display:flex;flex-direction:column;gap:6px}
.pl2-adv-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}

/* ── 4. Stage Board (Kanban) ──────────────────────────────── */

.pl2-toolbar{width:100%;box-sizing:border-box}
.pl2-stage{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;min-height:300px;transition:background .2s,border-color .2s}
.pl2-stage.drag-over{background:var(--g6);border-color:var(--g4);border-style:dashed}

/* Stage header (sticky) */
.pl2-stage-hd{padding:var(--sp4) var(--sp4) var(--sp3);background:var(--s0);border-bottom:1px solid var(--b0);position:sticky;top:0;z-index:2}
.pl2-stage-hd-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);margin-bottom:8px}
.pl2-stage-name{display:flex;align-items:center;gap:7px;font-size:var(--fz-base);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.pl2-stage-emoji{font-size:18px;line-height:1}
.pl2-stage-cnt{font-size:var(--fz-xs);font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;font-variant-numeric:tabular-nums}
.pl2-stage-bar{height:3px;border-radius:3px;width:100%}

/* Stage colors (semantic per journey phase) */
.pl2-stage-concept .pl2-stage-cnt,.pl2-stage-concept .pl2-stage-bar{background:var(--purple)}
.pl2-stage-prototype .pl2-stage-cnt,.pl2-stage-prototype .pl2-stage-bar{background:var(--blue)}
.pl2-stage-product .pl2-stage-cnt,.pl2-stage-product .pl2-stage-bar{background:var(--amber)}
.pl2-stage-project .pl2-stage-cnt,.pl2-stage-project .pl2-stage-bar{background:var(--green)}
.pl2-stage-unset .pl2-stage-cnt,.pl2-stage-unset .pl2-stage-bar{background:var(--t4)}

/* Stage body */
.pl2-stage-body{flex:1;padding:var(--sp3);display:flex;flex-direction:column;gap:var(--sp2);overflow-y:auto;max-height:calc(100vh - 360px)}
.pl2-stage-body::-webkit-scrollbar{width:6px}
.pl2-stage-body::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
.pl2-stage-empty{padding:var(--sp5) var(--sp3);text-align:center;color:var(--t4);font-size:var(--fz-sm);border:2px dashed var(--b1);border-radius:var(--r2);background:var(--s0);margin:auto 0}

/* ── 5. Project Card ──────────────────────────────────────── */
.pl2-card{
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);
  padding:var(--sp3);cursor:grab;
  transition:box-shadow .16s var(--ease),border-color .16s,transform .12s;
  position:relative;
}
.pl2-card:hover{box-shadow:var(--sh2);border-color:var(--b1);transform:translateY(-2px)}
.pl2-card:active{cursor:grabbing}
.pl2-card.dragging{opacity:.5;cursor:grabbing}
.pl2-card.is-onhold{opacity:.65}
.pl2-card.is-onhold::after{content:'متوقف';position:absolute;top:8px;left:8px;font-size:var(--fz-xs);font-weight:700;color:var(--amber);background:var(--amber-bg);padding:2px 8px;border-radius:999px;border:1px solid rgba(168,90,4,.2)}

.pl2-card-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pl2-card-type{font-size:14px;flex-shrink:0;line-height:1}
.pl2-card-name{font-size:var(--fz-base);font-weight:700;color:var(--t1);line-height:1.3;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl2-card-fresh{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--green-bg);flex-shrink:0}

.pl2-card-product{font-size:var(--fz-xs);color:var(--t3);margin-bottom:var(--sp3);font-weight:600}

.pl2-card-prog{margin-bottom:var(--sp2)}
.pl2-card-prog-bar{height:5px;background:var(--s3);border-radius:3px;overflow:hidden}
.pl2-card-prog-fill{height:100%;border-radius:3px;background:var(--g3);transition:width .5s var(--ease)}
.pl2-stage-concept .pl2-card-prog-fill{background:var(--purple)}
.pl2-stage-prototype .pl2-card-prog-fill{background:var(--blue)}
.pl2-stage-product .pl2-card-prog-fill{background:var(--amber)}
.pl2-stage-project .pl2-card-prog-fill{background:var(--green)}
.pl2-card-prog-lbl{display:flex;justify-content:space-between;font-size:var(--fz-xs);color:var(--t3);margin-top:5px;font-weight:600;font-variant-numeric:tabular-nums}

.pl2-card-meta{display:flex;align-items:center;gap:var(--sp2);font-size:var(--fz-xs);color:var(--t4);flex-wrap:wrap}
.pl2-card-meta-item{display:inline-flex;align-items:center;gap:4px}
.pl2-card-meta svg{flex-shrink:0}
.pl2-card-done{background:var(--green-bg);color:var(--green);border-color:var(--green);padding:2px 7px;border-radius:999px;font-weight:700;border:1px solid rgba(16,122,62,.18)}

/* ── 6. Table View ────────────────────────────────────────── */
.pl2-table-wrap{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);overflow-x:auto;-webkit-overflow-scrolling:touch}
.pl2-table{width:100%;border-collapse:collapse}
.pl2-table thead th{position:sticky;top:0;z-index:2;padding:12px 14px;background:var(--s1);font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-align:right;border-bottom:1px solid var(--b1);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.pl2-table td{padding:13px 14px;border-bottom:1px solid var(--b0);font-size:var(--fz-sm);vertical-align:middle;color:var(--t2)}
.pl2-table tr:last-child td{border-bottom:none}
.pl2-table tr{cursor:pointer;transition:background .12s}
.pl2-table tbody tr:hover td{background:var(--g6)}
.pl2-table-stage{display:inline-flex;align-items:center;gap:5px;font-size:var(--fz-xs);font-weight:700;padding:3px 9px;border-radius:999px}
.pl2-table-stage-concept{background:var(--purple-bg);color:var(--purple)}
.pl2-table-stage-prototype{background:var(--blue-bg);color:var(--blue)}
.pl2-table-stage-product{background:var(--amber-bg);color:var(--amber)}
.pl2-table-stage-project{background:var(--green-bg);color:var(--green)}
.pl2-table-stage-unset{background:var(--s2);color:var(--t4)}
.pl2-table-prog{display:flex;align-items:center;gap:8px;min-width:130px}
.pl2-table-prog-bar{flex:1;height:5px;background:var(--s3);border-radius:3px;overflow:hidden}
.pl2-table-prog-fill{height:100%;background:var(--g3);border-radius:3px}
.pl2-table-prog-pct{font-size:var(--fz-xs);font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums;min-width:38px;text-align:end}

/* ── 7. Empty state ──────────────────────────────────────── */
.pl2-empty-page{padding:var(--sp7) var(--sp5);text-align:center;color:var(--t3)}
.pl2-empty-page svg{opacity:.3;margin-bottom:var(--sp3)}
.pl2-empty-page .t{font-size:var(--fz-md);font-weight:700;color:var(--t1);margin-bottom:6px}
.pl2-empty-page .s{font-size:var(--fz-sm);color:var(--t4)}

/* ── 8. Project Detail Modal ─────────────────────────────── */
.pl2-detail-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3) var(--sp4);padding:var(--sp4);background:var(--s1);border-radius:var(--r2);border:1px solid var(--b0)}
.pl2-detail-row{display:flex;flex-direction:column;gap:3px}
.pl2-detail-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.pl2-detail-val{font-size:var(--fz-base);font-weight:700;color:var(--t1)}
.pl2-detail-section-title{font-size:var(--fz-sm);font-weight:700;color:var(--t1);margin-top:var(--sp3);margin-bottom:var(--sp2);display:flex;align-items:center;gap:6px}
.pl2-history-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}
.pl2-history-item{display:flex;align-items:center;gap:var(--sp2);padding:8px var(--sp3);background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);font-size:var(--fz-sm)}
.pl2-history-date{font-size:var(--fz-xs);color:var(--t4);font-variant-numeric:tabular-nums;min-width:90px;font-weight:600}
.pl2-history-arrow{color:var(--t4);font-size:var(--fz-sm)}
.pl2-history-from,.pl2-history-to{font-size:var(--fz-xs);font-weight:700;padding:2px 8px;border-radius:999px}
.pl2-detail-tasks{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.pl2-detail-task{display:flex;align-items:center;gap:var(--sp2);padding:8px var(--sp3);background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);font-size:var(--fz-sm)}
.pl2-detail-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pl2-detail-task-name{flex:1;min-width:0;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl2-detail-task-ass{font-size:var(--fz-xs);color:var(--t4);font-weight:600}
.pl2-stage-picker{display:flex;gap:6px;flex-wrap:wrap}
.pl2-stage-pick{padding:8px 14px;border-radius:999px;border:1.5px solid var(--b1);background:var(--s1);font-size:var(--fz-sm);font-weight:600;color:var(--t3);cursor:pointer;transition:background .14s,border-color .14s,color .14s;font-family:var(--ff)}
.pl2-stage-pick:hover{border-color:var(--g4);color:var(--g3)}
.pl2-stage-pick.current{background:var(--g3);border-color:var(--g3);color:#fff}

/* ── 8.5 ByProduct View — heart of pipeline v2 ───────────── */
.pl2-byproduct{display:flex;flex-direction:column;gap:var(--sp5);width:100%}

.pl2-bp-group{
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r);
  padding:var(--sp4) var(--sp5);
  box-shadow:var(--sh1);
  display:flex;flex-direction:column;gap:var(--sp4);
  transition:box-shadow .2s var(--ease),border-color .2s;
}
.pl2-bp-group:hover{box-shadow:var(--sh2);border-color:var(--b1)}

/* Product header */
.pl2-bp-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);padding-bottom:var(--sp3);
  border-bottom:1px solid var(--b0);
}
.pl2-bp-hd-l{display:flex;align-items:center;gap:var(--sp2);min-width:0;flex:1}
.pl2-bp-hd-l svg{color:var(--g3);flex-shrink:0}
.pl2-bp-hd-l h3{
  font-size:var(--fz-md);font-weight:800;color:var(--t1);
  letter-spacing:-.2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl2-bp-hd-cnt{
  font-size:var(--fz-xs);font-weight:700;
  color:var(--g3);background:var(--g5);
  padding:3px 10px;border-radius:999px;
  border:1px solid rgba(27,100,67,.15);
  flex-shrink:0;
}
.pl2-bp-hd-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.pl2-bp-hd-pct{font-size:var(--fz-lg);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.5px}
.pl2-bp-hd-pct-lbl{font-size:var(--fz-xs);color:var(--t4);font-weight:600}

/* Sparkline — stage distribution bar */
.pl2-spark{
  display:flex;width:100%;
  height:8px;border-radius:999px;
  overflow:hidden;
  background:var(--s2);
  border:1px solid var(--b0);
}
.pl2-spark-seg{height:100%;transition:width .5s var(--ease);min-width:2px}
.pl2-spark .pl2-stage-concept{background:var(--purple)}
.pl2-spark .pl2-stage-prototype{background:var(--blue)}
.pl2-spark .pl2-stage-product{background:var(--amber)}
.pl2-spark .pl2-stage-project{background:var(--green)}
.pl2-spark .pl2-stage-unset{background:var(--t4)}

/* Columns grid — 4 stages (or 5 with unset) */
.pl2-bp-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:var(--sp3);
}
.pl2-bp-col{
  background:var(--s1);
  border:1px solid var(--b0);
  border-radius:var(--r2);
  padding:var(--sp3);
  display:flex;flex-direction:column;gap:var(--sp2);
  min-height:120px;
  transition:background .2s,border-color .2s;
}
.pl2-bp-col.drag-over{
  background:var(--g6);
  border-color:var(--g4);
  border-style:dashed;
}
.pl2-bp-col-hd{
  display:flex;align-items:center;gap:6px;
  padding-bottom:var(--sp2);
  border-bottom:1px solid var(--b0);
}
.pl2-bp-col-emoji{font-size:14px;line-height:1}
.pl2-bp-col-name{
  flex:1;font-size:var(--fz-xs);font-weight:700;
  color:var(--t2);text-transform:uppercase;letter-spacing:.5px;
}
.pl2-bp-col-cnt{
  font-size:var(--fz-xs);font-weight:800;
  padding:2px 8px;border-radius:999px;
  color:#fff;font-variant-numeric:tabular-nums;
}
.pl2-bp-col.pl2-stage-concept .pl2-bp-col-cnt{background:var(--purple)}
.pl2-bp-col.pl2-stage-prototype .pl2-bp-col-cnt{background:var(--blue)}
.pl2-bp-col.pl2-stage-product .pl2-bp-col-cnt{background:var(--amber)}
.pl2-bp-col.pl2-stage-project .pl2-bp-col-cnt{background:var(--green)}
.pl2-bp-col.pl2-stage-unset .pl2-bp-col-cnt{background:var(--t4)}

.pl2-bp-col-body{
  display:flex;flex-direction:column;gap:5px;
  min-height:42px;flex:1;
}
.pl2-bp-empty{
  font-size:var(--fz-xs);color:var(--t4);
  text-align:center;padding:var(--sp3) 0;
  opacity:.5;
}

/* Mini card (used inside ByProduct columns) */
.pl2-mini{
  padding:8px 10px;cursor:grab;
  border-radius:var(--r3);
  background:var(--s0);
  border:1px solid var(--b0);
  border-right:3px solid transparent;
  transition:box-shadow .14s var(--ease),border-color .14s,transform .12s;
  position:relative;
}
.pl2-mini:hover{
  box-shadow:var(--sh1);
  transform:translateY(-1px);
  border-color:var(--b1);
}
.pl2-mini:active{cursor:grabbing}
.pl2-mini.dragging{opacity:.5}
.pl2-mini.pl2-stage-concept{border-right-color:var(--purple)}
.pl2-mini.pl2-stage-prototype{border-right-color:var(--blue)}
.pl2-mini.pl2-stage-product{border-right-color:var(--amber)}
.pl2-mini.pl2-stage-project{border-right-color:var(--green)}
.pl2-mini.pl2-stage-unset{border-right-color:var(--t4);border-right-style:dashed}
.pl2-mini.is-onhold{opacity:.55}

.pl2-mini-name{
  font-size:var(--fz-sm);font-weight:700;color:var(--t1);
  line-height:1.3;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl2-mini-prog{
  height:3px;background:var(--s3);border-radius:3px;
  overflow:hidden;margin-bottom:4px;
}
.pl2-mini-prog-fill{height:100%;background:var(--g3);border-radius:3px;transition:width .4s var(--ease)}
.pl2-mini.pl2-stage-concept .pl2-mini-prog-fill{background:var(--purple)}
.pl2-mini.pl2-stage-prototype .pl2-mini-prog-fill{background:var(--blue)}
.pl2-mini.pl2-stage-product .pl2-mini-prog-fill{background:var(--amber)}
.pl2-mini.pl2-stage-project .pl2-mini-prog-fill{background:var(--green)}
.pl2-mini-meta{
  display:flex;justify-content:space-between;
  font-size:var(--fz-xs);color:var(--t4);
  font-weight:600;font-variant-numeric:tabular-nums;
}
.pl2-mini-done{color:var(--green);font-weight:800}

/* ── 9. Responsive ───────────────────────────────────────── */
@media(max-width:1023px){
  .pl2-board{grid-template-columns:repeat(2,1fr)}
  .pl2-bp-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .pl2-header-l h2{font-size:var(--fz-lg)}
  .pl2-pulse{grid-template-columns:repeat(2,1fr);padding:var(--sp3);gap:var(--sp2)}
  .pl2-pulse-item{padding-inline:var(--sp2);border-inline-start:none}
  .pl2-pulse-ic{width:36px;height:36px}
  .pl2-pulse-val{font-size:var(--fz-lg)}
  .pl2-toolbar{padding:var(--sp3)}
  .pl2-view-grp{margin-inline-start:0;width:100%;justify-content:center}
  .pl2-view-btn{flex:1}
  .pl2-board{grid-template-columns:1fr;gap:var(--sp4)}
  .pl2-stage-body{max-height:none}
  .pl2-detail-info{grid-template-columns:1fr}
  .pl2-table thead th,.pl2-table td{padding:9px 10px;font-size:var(--fz-xs)}

  /* ByProduct mobile */
  .pl2-bp-group{padding:var(--sp3)}
  .pl2-bp-hd{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
  .pl2-bp-hd-r{flex-direction:row;align-items:center;gap:6px;align-self:flex-end}
  .pl2-bp-hd-pct{font-size:var(--fz-md)}
  .pl2-bp-cols{grid-template-columns:1fr;gap:var(--sp2)}
  .pl2-bp-col{min-height:auto}
}