/* ═══════════════════════════════════════════════════════════════
   Manzoma Pending 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.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PENDING PAGE
═══════════════════════════════════════════════════════════════ */
/* Toolbar */
.pend-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh1);
}
.pend-kpis{display:flex;gap:20px;align-items:center}
.pend-kpi{display:flex;flex-direction:column;align-items:center}
.pend-kpi-num{font-size:24px;font-weight:800;color:var(--t1);line-height:1}
.pend-kpi-lbl{font-size:11px;color:var(--t4);font-weight:600}
.pend-filters{display:flex;gap:8px;flex-wrap:wrap}
.pend-sel{
  padding:6px 10px;border-radius:8px;
  border:1.5px solid var(--b1);background:var(--s0);
  font-size:12px;font-family:var(--ff);color:var(--t2);
  cursor:pointer;outline:none;transition:border-color .13s;
}
.pend-sel:focus{border-color:var(--g4)}

/* Groups */
.pend-cards{display:flex;flex-direction:column;gap:12px}
.pend-group{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);
}
.pend-group-hd{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--s1);
  border-bottom:1px solid var(--b0);
  border-right:3px solid #f59e0b;
}
.pend-group-name{font-size:13px;font-weight:800;color:var(--t1);flex:1}
.pend-group-folder{font-size:11px;color:var(--t4);background:var(--s2);padding:1px 7px;border-radius:8px}
.pend-group-cnt{font-size:11px;font-weight:700;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:10px}

/* Cards */
.pend-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--b0);
  transition:background .1s;
}
.pend-card:last-child{border-bottom:none}
.pend-card:hover{background:var(--s1)}
.pend-card-main{flex:1;min-width:0}
.pend-card-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap}
.pend-card-name{
  font-size:13px;font-weight:600;color:var(--t1);
  text-decoration:none;transition:color .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pend-card-name:hover{color:var(--g3);text-decoration:underline;text-underline-offset:2px}
.pend-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pend-due{font-size:11px;color:var(--t4)}
.pend-card-side{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pend-restore-btn{
  padding:5px 10px;border-radius:6px;
  border:1.5px solid var(--g4);background:var(--g5);
  font-size:11px;font-weight:700;color:var(--g3);
  cursor:pointer;transition:all .13s;font-family:var(--ff);
  white-space:nowrap;
}
.pend-restore-btn:hover{background:var(--g3);color:#fff}

/* Pending btn in task card */
.tc-act-pending:hover{background:#fef3c7;color:#92400e;border-color:#f59e0b}

/* Pending status in task card color */
.tc-pending{border-right-color:#f59e0b;background:#fffdf0}

@media(max-width:640px){
  .pend-toolbar{flex-direction:column;align-items:flex-start}
  .pend-kpis{flex-direction:row}
}

/* ── Filter: product + project hierarchy ────────────────────── */
.tp-proj-group-lbl{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;color:var(--t4);
  letter-spacing:.5px;text-transform:uppercase;
  padding:2px 6px;background:var(--s2);
  border-radius:4px;margin:2px 2px 0;
  white-space:nowrap;
}
#product-chips{display:flex;flex-wrap:wrap;gap:5px}

/* ── Lists Modal — folder order section ─────────────────────── */
.ls-section-title{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--t3);
  margin-bottom:8px;
}
.ls-folder-order-wrap{
  display:flex;flex-direction:column;gap:3px;
}
.ls-fo-row{
  display:flex;align-items:center;gap:8px;
  background:var(--s1);border:1.5px solid var(--b0);
  border-radius:6px;padding:7px 10px;
  cursor:grab;transition:border-color .12s,background .12s;
  user-select:none;
}
.ls-fo-row:hover{border-color:var(--g4);background:var(--g5)}
.ls-fo-row.ls-fo-over{border-color:var(--g3);background:var(--g5);border-style:dashed}
.ls-fo-row:active{cursor:grabbing}
.ls-fo-handle{
  font-size:14px;color:var(--t4);
  cursor:grab;flex-shrink:0;line-height:1;
}
.ls-fo-name{
  flex:1;font-size:13px;font-weight:600;color:var(--t1);
}
.ls-fo-arrows{display:flex;gap:3px}
.ls-fo-btn{
  width:24px;height:24px;border-radius:5px;
  border:1px solid var(--b1);background:var(--s0);
  font-size:12px;cursor:pointer;color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.ls-fo-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
.ls-fo-btn-ph{width:24px;height:24px;flex-shrink:0}

/* ── Product → Project cascade selects ─────────────────────── */
#f-product, #move-product, #pdf-product {
  border:1.5px solid var(--g4);
  background:var(--g5);
  font-weight:600;
  color:var(--g2);
}
#f-product:focus, #move-product:focus, #pdf-product:focus {
  border-color:var(--g3);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ── On-Hold Project Styles ─────────────────────────────────── */
.ls-row-onhold{
  border-right-color:var(--amber)!important;
  background:#fffbf0;
}
.ls-onhold-badge{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;
  background:#f59e0b;color:#fff;
  padding:1px 5px;border-radius:4px;
  margin-right:4px;vertical-align:middle;
  letter-spacing:.3px;
}
.ls-hold-btn{
  padding:3px 9px;border-radius:5px;
  border:1.5px solid var(--amber);
  background:#fffbf0;color:#92400e;
  font-size:10px;font-weight:700;
  cursor:pointer;transition:all .12s;
  font-family:var(--ff);white-space:nowrap;
}
.ls-hold-btn:hover{background:var(--amber);color:#fff}
.ls-hold-active{background:var(--amber);color:#fff}
.ls-hold-active:hover{background:#d97706}

/* On-hold card style in projects page */
.prj-card-onhold{
  border-top-color:var(--amber)!important;
  opacity:.75;
}
.prj-card-onhold .prj-card-name::after{
  content:' (م.م)';
  font-size:10px;font-weight:700;
  color:var(--amber);
}

/* ── Report: clickable project rows ─────────────────────────── */
.rep-proj-row{cursor:pointer}
.rep-proj-row:hover{background:var(--g5)!important}
.rpr-arrow{
  margin-right:auto;opacity:0;
  transition:opacity .12s, transform .12s;
  color:var(--g3);flex-shrink:0;
}
.rep-proj-row:hover .rpr-arrow{opacity:1;transform:translateX(-3px)}

/* on-hold row style */
.rpr-onhold .rpr-dot{background:var(--amber)!important}
.rpr-onhold{opacity:.7}

/* ── Project page header ─────────────────────────────────────── */
.pp-header-sub span{font-weight:700}

/* Clickable project tags everywhere */
.tc-project-tag{cursor:pointer;transition:background .12s,color .12s}
.tc-project-tag:hover{background:var(--g5)!important;color:var(--g3)!important}
.uc-proj{cursor:pointer;transition:background .12s}
.uc-proj:hover{background:var(--g5)!important;color:var(--g3)!important}

/* ── WBS Inline inside project page ─────────────────────────── */
.wbs-inline{
  padding:12px;
  background:var(--s0);
  min-height:200px;
}
.wbs-inline .wbs-proj-block{
  box-shadow:none;
  border:1px solid var(--b0);
  border-radius:var(--r2);
  margin-bottom:8px;
}