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

/* ═══════════════════════════════════════════════════════════════
   PROJECT GRID (shared by both old pc2 and new prj-card)
═══════════════════════════════════════════════════════════════ */
.pg-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp4)}
.pc2{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);box-shadow:var(--sh1);
  overflow:hidden;transition:box-shadow .18s,transform .16s;
}
.pc2:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pc2-top{padding:16px 18px 13px;display:flex;align-items:flex-start;gap:13px}
.pc2-ring{flex-shrink:0}
.pc2-meta{flex:1;min-width:0}
.pc2-name{font-size:13px;font-weight:800;color:var(--t1);line-height:1.3;margin-bottom:6px}
.pc2-stats-row{display:flex;gap:10px;flex-wrap:wrap}
.pc2-stat-item{display:flex;flex-direction:column;align-items:center;min-width:44px}
.pc2-stat-val{font-size:17px;font-weight:800}.pc2-stat-lbl{font-size:10px;color:var(--t4);margin-top:1px}
.pc2-tasks{padding:9px 17px}
.pc2-task-item{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--b0);font-size:12px}
.pc2-task-item:last-child{border-bottom:none}
.pc2-task-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pc2-task-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.pc2-task-date{font-size:11px;color:var(--t4);white-space:nowrap}
.pc2-footer{padding:9px 18px;background:var(--s1);display:flex;align-items:center;justify-content:space-between;gap:9px}
.pc2-pct{font-size:12px;font-weight:700;color:var(--g3);white-space:nowrap}
.pc2-bar{flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.pc2-bar-fill{height:100%;border-radius:4px;transition:width .8s var(--ease)}
.pc2-wbs-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:10px 0;width:100%;background:none;border:none;
  border-top:1px solid var(--b0);color:var(--g3);
  font-size:12px;font-weight:600;cursor:pointer;
  border-radius:0 0 var(--r2) var(--r2);
  transition:background .13s,color .13s;font-family:var(--ff);
}
.pc2-wbs-btn:hover{background:var(--g5);color:var(--g2)}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO STRUCTURE — نظام الهيكلة الديناميكية
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO STRUCTURE — Org Chart + Project Page
═══════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────── */
.ps-wrap{width:100%}
.ps-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;background:var(--g1);border-radius:var(--r);
  margin-bottom:16px;
}
.ps-tabs{display:flex;gap:3px;background:rgba(255,255,255,.1);border-radius:8px;padding:3px;flex:1}
.ps-tab{
  flex:1;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.6);background:transparent;border:none;cursor:pointer;
  transition:all .18s;white-space:nowrap;
}
.ps-tab.active{background:#fff;color:var(--g2);box-shadow:0 1px 6px rgba(0,0,0,.2)}
.ps-tab:not(.active):hover{color:#fff;background:rgba(255,255,255,.15)}
.ps-btn-edit{
  padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  cursor:pointer;transition:all .16s;white-space:nowrap;
}
.ps-btn-edit:hover{background:rgba(255,255,255,.22)}
.ps-btn-save{
  padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
  background:var(--accent);color:var(--g1);border:none;cursor:pointer;
  transition:all .16s;white-space:nowrap;
}
.ps-btn-save:hover{filter:brightness(1.1)}
.ps-btn-save:disabled{opacity:.6;cursor:not-allowed}
.ps-btn-cancel{
  padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;
  background:rgba(192,48,42,.25);color:#fca5a5;border:1px solid rgba(192,48,42,.3);
  cursor:pointer;transition:all .16s;white-space:nowrap;
}
.ps-btn-cancel:hover{background:rgba(192,48,42,.4)}
.ps-edit-hint{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}

/* ── Org Tree container ───────────────────────────────────── */
.ps-org-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.ps-org-tree{
  display:flex;flex-direction:column;
  align-items:center;
  min-width:600px;
  padding:4px 16px 20px;
}

/* Root node */
.ps-org-root{
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}
.ps-org-root-node{
  background:var(--g2);color:#fff;
  border-radius:var(--r);padding:13px 28px;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 24px rgba(15,45,30,.4);
  white-space:nowrap;
}
.ps-org-root-text{display:flex;flex-direction:column;gap:2px}
.ps-org-root-title{font-size:14px;font-weight:800;letter-spacing:-.2px}
.ps-org-root-sub{font-size:11px;font-weight:400;opacity:.72}
.ps-org-root-stem{width:2px;height:24px;background:var(--g4)}

/* Views — no slider, use display:none/block toggle instead */
.ps-views-slider{width:100%}
.ps-views-track{width:100%}
.ps-org-view{
  display:none;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.ps-org-view.active{display:flex}

/* H-rail connecting stem to groups */
.ps-org-h-rail{
  height:2px;background:var(--g4);
  width:80%;max-width:700px;
  margin:0 auto;
  flex-shrink:0;
}
.ps-org-groups-row{
  display:flex;align-items:flex-start;justify-content:center;
  gap:14px;width:100%;padding:0 8px;
  flex-wrap:wrap;
}

/* Group */
.ps-org-group{
  display:flex;flex-direction:column;align-items:center;
  flex:1;min-width:160px;max-width:240px;
}
.ps-org-unassigned{opacity:.7}
.ps-org-connector-v{width:2px;height:20px;background:var(--g4)}
.ps-org-group-box{
  width:100%;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh2);border:1px solid var(--b0);
  background:var(--s0);
}
.ps-org-group-hd{
  padding:10px 12px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--b0);
}
.ps-org-group-icon{font-size:15px;flex-shrink:0}
.ps-org-group-label{
  font-size:12px;font-weight:800;color:var(--t1);flex:1;min-width:0;
  border-radius:4px;padding:1px 2px;outline:none;
}
.ps-org-group-label:focus{background:rgba(45,122,87,.1);box-shadow:0 0 0 2px var(--g4)}
.ps-org-group-pct{font-size:11px;font-weight:700;flex-shrink:0;white-space:nowrap}

/* Cards inside group */
.ps-org-cards{
  padding:8px;display:flex;flex-direction:column;gap:6px;min-height:52px;
  background:var(--s1);transition:background .15s;
}
.ps-org-cards.ps-drop-active{background:var(--g5);box-shadow:inset 0 0 0 2px var(--g4)}
.ps-org-empty{
  text-align:center;padding:12px 8px;font-size:11px;color:var(--t4);
  border:1.5px dashed var(--s4);border-radius:var(--r3);
}

/* Individual project card */
.ps-org-card{
  background:var(--s0);border:1px solid var(--b1);border-radius:var(--r3);
  padding:8px 10px;box-shadow:var(--sh1);
  transition:box-shadow .15s,transform .15s,opacity .15s;
}
.ps-org-card:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.ps-org-card.ps-edit-mode{cursor:grab;user-select:none;display:flex;gap:6px;align-items:flex-start}
.ps-org-card.ps-edit-mode:hover{box-shadow:var(--sh2)}
.ps-org-card.ps-dragging{opacity:.35;transform:scale(.96)}
.ps-drag-handle{color:var(--t4);font-size:14px;cursor:grab;padding-top:2px;flex-shrink:0;transition:color .13s}
.ps-org-card:hover .ps-drag-handle{color:var(--g4)}
.ps-card-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:5px;line-height:1.35}
.ps-card-pct{font-size:15px;font-weight:800;margin-bottom:3px;line-height:1}
.ps-card-bar{height:4px;background:var(--s3);border-radius:4px;overflow:hidden;margin-bottom:5px}
.ps-card-bar-fill{height:100%;border-radius:4px;transition:width .6s}
.ps-card-stats{display:flex;gap:4px;flex-wrap:wrap}
.ps-badge{font-size:10px;padding:1px 5px;border-radius:6px;font-weight:600}
.ps-badge-late{background:var(--red-bg);color:var(--red)}
.ps-badge-done{background:var(--g5);color:var(--g3)}

.ps-loading{text-align:center;padding:32px;color:var(--t4);font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   PROJECT CARDS — Full CSS (was missing after cleanup)
═══════════════════════════════════════════════════════════════ */
.prj-card{
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r);
  box-shadow:var(--sh1);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
  border-top:3px solid var(--g4);
}
.prj-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.prj-card-late{border-top-color:var(--red)}
.prj-card-done{border-top-color:var(--green)}

/* Header */
.prj-card-hd{
  display:flex;align-items:center;gap:var(--sp3);
  padding:var(--sp4) var(--sp4) var(--sp3);
}
.prj-ring-wrap{flex-shrink:0}
.prj-card-info{flex:1;min-width:0}
.prj-card-name{
  font-size:var(--fz-md);font-weight:800;color:var(--t1);
  line-height:1.3;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px;
}
.prj-health{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fz-xs);font-weight:700;
  padding:3px 9px;border-radius:999px;
}
.prj-health-done{background:var(--green-bg);color:var(--green)}
.prj-health-late{background:var(--red-bg);color:var(--red)}
.prj-health-good{background:var(--g5);color:var(--g3)}
.prj-health-risk{background:var(--amber-bg);color:var(--amber)}

/* Stats row */
.prj-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
  padding:8px 14px;
}
.prj-stat{text-align:center}
.prj-stat + .prj-stat{border-right:1px solid var(--b0)}
.prj-stat-num{
  font-size:20px;font-weight:800;line-height:1.1;
  color:var(--t1);font-variant-numeric:tabular-nums;
}
.prj-stat-lbl{font-size:10px;color:var(--t4);font-weight:600;margin-top:2px}
.prj-stat-prog .prj-stat-num{color:var(--amber)}
.prj-stat-done .prj-stat-num{color:var(--green)}
.prj-stat-late .prj-stat-num{color:var(--red)}

/* Progress bar */
.prj-progress-wrap{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
}
.prj-progress-bar{
  flex:1;height:6px;background:var(--s3);border-radius:4px;overflow:hidden;
}
.prj-progress-fill{
  height:100%;border-radius:4px;
  transition:width .7s var(--ease);
}
.prj-progress-pct{
  font-size:12px;font-weight:700;color:var(--t3);
  white-space:nowrap;min-width:32px;text-align:left;
}

/* Active tasks */
.prj-tasks-section{
  padding:0 14px 8px;display:flex;flex-direction:column;gap:5px;flex:1;
}
.prj-task-row{
  display:flex;align-items:center;gap:7px;min-height:22px;
}
.prj-task-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.prj-task-dot-red   {background:var(--red)}
.prj-task-dot-amber {background:var(--amber)}
.prj-task-dot-prog  {background:var(--blue)}
.prj-task-dot-norm  {background:var(--g4)}
.prj-task-name{
  flex:1;color:var(--t2);font-size:12px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prj-task-date{font-size:11px;color:var(--t4);font-weight:600;white-space:nowrap}
.prj-date-late {color:var(--red)}
.prj-date-today{color:var(--amber)}
.prj-all-done{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--green);font-weight:600;padding:4px 0;
}

/* Footer */
.prj-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-top:1px solid var(--b0);
  margin-top:auto;background:var(--s1);
}
.prj-wbs-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:6px;
  border:1.5px solid var(--b1);background:var(--s0);
  font-size:11px;font-weight:600;color:var(--t3);
  cursor:pointer;transition:all .13s;font-family:var(--ff);
}
.prj-wbs-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.prj-active-lbl{font-size:11px;color:var(--t4);font-weight:500}

/* ── Mobile fixes for projects page ─────────────────────────── */
@media(max-width:767px){
  .prj-card-hd{padding:12px 12px 8px;gap:10px}
  .prj-card-name{font-size:13px}
  .prj-stats-row{padding:7px 10px}
  .prj-stat-num{font-size:17px}
  .prj-progress-wrap{padding:7px 12px}
  .prj-tasks-section{padding:0 12px 8px}
  .prj-card-footer{padding:7px 12px}
}

/* ── Overview urgent card mobile ─────────────────────────────── */
@media(max-width:767px){
  .ov-section-hd{flex-direction:column;align-items:flex-start}
  .urgent-filters{gap:4px}
  .uf-btn{padding:4px 9px;font-size:11px}
  .uf-av{width:14px;height:14px;font-size:7px}
  .urgent-card{flex-wrap:wrap}
  .uc-acts{opacity:1;transform:none;pointer-events:all}
  /* Action buttons in urgent cards always visible on mobile */
}

/* ── Task cards mobile ───────────────────────────────────────── */
@media(max-width:767px){
  .tc-side{padding:0 8px 0 4px;gap:4px}
  .tc-avatar{width:24px;height:24px;font-size:9px}
  .tc-main{padding:9px 6px 9px 0}
  .tc-title{font-size:13px}
  .tc-bottom{gap:4px}
  .tc-project-tag{font-size:10px;padding:1px 5px}
}

/* ── Urgent filters — prevent overflow on mobile ─────────────── */
.urgent-filters{
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
}
.uf-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--s2);color:var(--t3);border:1px solid var(--b0);
  cursor:pointer;transition:all .14s;white-space:nowrap;
  font-family:var(--ff);
}
.uf-btn:hover{background:var(--s3);color:var(--t1)}
.uf-btn.on{background:var(--g3);color:#fff;border-color:var(--g3)}
.uf-av{
  width:16px;height:16px;border-radius:50%;
  font-size:8px;font-weight:700;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Overview page styles moved to styles/pages/overview.css. */

/* ═══════════════════════════════════════════════════════════════
   PROJECTS PAGE — Product section headers
═══════════════════════════════════════════════════════════════ */
.proj-product-grid{display:flex;flex-direction:column;gap:20px}

.proj-product-section{display:flex;flex-direction:column;gap:10px}

.proj-product-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;gap:12px;flex-wrap:wrap;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r2);border-right:4px solid var(--g3);
  box-shadow:var(--sh1);
}
.proj-product-hd-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.proj-product-name{font-size:14px;font-weight:800;color:var(--t1)}
.proj-product-count{
  font-size:11px;font-weight:600;color:var(--t4);
  background:var(--s2);padding:2px 8px;border-radius:10px;
}
.proj-product-late{
  font-size:11px;font-weight:700;color:var(--red);
  background:var(--red-bg);padding:2px 8px;border-radius:10px;
}
.proj-product-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.proj-product-pct{font-size:12px;font-weight:700;color:var(--t3);white-space:nowrap}
.proj-product-bar{width:80px;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.proj-product-bar-fill{height:100%;border-radius:4px;transition:width .6s var(--ease)}

/* Reports page styles moved to styles/pages/reports.css. */

/* Lists settings folder header */
.ls-folder-group{margin-bottom:8px}
.ls-folder-hd{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:var(--t4);
  letter-spacing:.5px;padding:4px 6px 3px;
}

@media(max-width:640px){
  .proj-product-hd{padding:8px 10px}
  .proj-product-bar{display:none}
  .rep-proj-row{flex-wrap:wrap;gap:6px}
  .rep-proj-row-bar{min-width:80px}
}

/* ── Portfolio: Product sections ────────────────────────────── */
.pf-prod-section{margin-bottom:12px}
/* ── Lists Settings — type selector ────────────────────────── */
.ls-type-sel{
  padding:3px 8px;border-radius:6px;
  border:1.5px solid var(--b1);background:var(--s0);
  font-size:11px;font-family:var(--ff);color:var(--t2);
  cursor:pointer;transition:border-color .13s;flex-shrink:0;
}
.ls-type-sel:focus{border-color:var(--g4);outline:none}

/* ══════════════════════════════════════════════════════════════
   ON-HOLD PROJECT CARD — Professional Visual Treatment
   ══════════════════════════════════════════════════════════════ */

/* Override existing on-hold style with stronger treatment */
.prj-card-onhold {
  border-top-color: #94A3B8 !important;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  opacity: 1 !important;
  position: relative;
  overflow: hidden;
}

/* Diagonal stripe overlay — subtle "paused" texture */
.prj-card-onhold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(148, 163, 184, 0.06) 6px,
    rgba(148, 163, 184, 0.06) 12px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* On-hold banner — top right corner */
.prj-card-onhold::after {
  content: '⏸ متوقف';
  position: absolute;
  top: 8px;
  left: 8px;
  background: #64748B;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: .03em;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

/* Remove the (م.م) suffix — replaced by badge */
.prj-card-onhold .prj-card-name::after {
  display: none;
}

/* Muted text for on-hold */
.prj-card-onhold .prj-card-name {
  color: #64748B;
  padding-top: 4px; /* space for the banner */
}

/* Health badge — on-hold state */
.prj-health-hold {
  background: #EDF2F7;
  color: #64748B;
  border-color: #CBD5E1;
}

/* Sort on-hold to end of list */
.prj-card-onhold .prj-stats-row {
  opacity: .6;
}

.prj-card-onhold .prj-tasks-section {
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   ORG CHART CARDS — Colors + Alerts Enhancement
   ══════════════════════════════════════════════════════════════ */

/* Card name row — health icon + name */
.ps-card-name-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 4px;
}

.ps-card-health {
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.2;
}

/* Badges */
.ps-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-badge-late {
  background: #FEE2E2;
  color: #C0302A;
  border: 1px solid #FECACA;
}

.ps-badge-done {
  background: #F3F4F6;
  color: #6B7280;
  border: 1px solid #E5E7EB;
}

.ps-badge-count {
  background: #F3F4F6;
  color: #6B7280;
  border: 1px solid #E5E7EB;
}

.ps-badge-done-full {
  background: #DCFCE7;
  color: #145E2F;
  border: 1px solid #BBF7D0;
}

.ps-badge-hold {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
}

/* On-hold card — muted */
.ps-card-hold {
  opacity: .75;
}

.ps-card-hold .ps-card-name {
  color: #64748B;
}

/* Card hover — lift */
.ps-org-card:not(.ps-edit-mode):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transition: transform .15s, box-shadow .15s;
}

/* ══════════════════════════════════════════════════════════════
   PROJECT FILES — 4 Dots + Modal
   ══════════════════════════════════════════════════════════════ */

/* ── 4 Dots on org card ──────────────────────────────────── */
.ps-card-dots {
  display: flex;
  gap: 5px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--b2);
  margin-top: 6px;
  cursor: pointer;
}
.ps-card-dots:hover { opacity: .8; }

.ps-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: transparent;
  transition: all .2s;
  flex-shrink: 0;
}
.ps-dot-done {
  background: #2A6B50;
  border-color: #2A6B50;
  box-shadow: 0 0 0 2px rgba(42,107,80,.15);
}

/* ── Project Files Modal ─────────────────────────────────── */
.pf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--b2);
  background: var(--bg2);
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 8px;
  user-select: none;
}
.pf-item:hover {
  border-color: var(--s4);
  background: color-mix(in srgb, var(--s4) 5%, var(--bg2));
}
.pf-item-done {
  border-color: #2A6B50;
  background: #F0FDF4;
}
.pf-item-left {
  display: flex; align-items: center; gap: 10px;
}
.pf-item-icon { font-size: 18px; }
.pf-item-label { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.pf-item-done .pf-item-label { color: #2A6B50; }

.pf-dot-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: transparent;
  transition: all .2s;
  flex-shrink: 0;
}
.pf-item-done .pf-dot-wrap,
.pf-dot-done.pf-dot-wrap {
  background: #2A6B50;
  border-color: #2A6B50;
}
.pf-dot-done::after {
  content: '✓';
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.pf-item-done .pf-dot-wrap::after {
  content: '✓';
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}