/* ═══════════════════════════════════════════════════════════════
   Manzoma Reports Page Styles
   Phase 2 split: reports dashboard, reports WBS grid, and product structure sections.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   REPORTS
═══════════════════════════════════════════════════════════════ */
.rep-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--sp3)}
.rep-header-left h2{font-size:var(--fz-lg);font-weight:800;color:var(--t1);letter-spacing:-.3px}
.rep-header-left p{font-size:var(--fz-sm);color:var(--t3);margin-top:3px}
.rep-badge{background:var(--g2);color:#fff;padding:8px 15px;border-radius:999px;font-size:var(--fz-sm);font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.rep-date-txt{font-size:var(--fz-xs);color:rgba(255,255,255,.55);margin-top:2px}
.board-box{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);border-right:3px solid var(--g4)}
.board-box h3{font-size:var(--fz-xs);font-weight:700;color:var(--g3);margin-bottom:var(--sp3);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.5px}
.board-highlights{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp3)}
.bh-item{background:var(--g6);border:1px solid var(--b0);border-radius:var(--r3);padding:var(--sp3) var(--sp4);display:flex;align-items:center;gap:var(--sp3);transition:background .15s,border-color .15s}
.bh-item:hover{background:var(--g5);border-color:var(--b1)}
.bh-icon{font-size:var(--fz-lg);flex-shrink:0}
.bh-text strong{display:block;font-size:var(--fz-base);font-weight:800;color:var(--t1);line-height:1.3}
.bh-text span{font-size:var(--fz-xs);color:var(--t3)}
.charts-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.rep-table-sec{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.rep-table-hd{padding:var(--sp3) var(--sp5);border-bottom:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between;background:var(--s1)}
.rep-table-hd h3{font-size:var(--fz-sm);font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px}
.rep-cnt{font-size:var(--fz-xs);color:var(--t3);background:var(--s2);padding:3px 10px;border-radius:12px;font-weight:600}
/* KPI cards for reports */
.rep-kpi-card-pro{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);
  display:flex;align-items:center;gap:var(--sp4);min-height:108px;
  transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
}
.rep-kpi-card-pro:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.rep-kpi-ring{flex-shrink:0}
.rep-kpi-body{flex:1;min-width:0}
.rep-kpi-val{font-size:var(--fz-2xl);font-weight:800;line-height:1.05;margin-bottom:3px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.rep-kpi-title{font-size:var(--fz-sm);font-weight:700;color:var(--t2);margin-bottom:2px}
.rep-kpi-sub{font-size:var(--fz-xs);color:var(--t4)}
.rep-kpi-badge{font-size:var(--fz-xs);font-weight:700;margin-top:6px}
#rep-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp4)}

/* ═══════════════════════════════════════════════════════════════
   WBS GRID (in reports page)
═══════════════════════════════════════════════════════════════ */
.wbs-grid{display:flex;flex-direction:column;gap:13px;padding:14px 18px}
.wbs-proj-block{border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden;background:var(--s0);box-shadow:var(--sh1)}
.wbs-proj-header{padding:11px 15px;background:var(--s1);display:flex;align-items:center;justify-content:space-between;gap:11px;border-bottom:1px solid var(--b0);border-right:3px solid var(--g4)}
.wbs-proj-icon-name{display:flex;align-items:center;gap:9px}
.wbs-proj-name{font-size:13px;font-weight:800;color:var(--t1)}
.wbs-proj-stats{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wbs-stat-chip{font-size:11px;font-weight:700;background:var(--s2);color:var(--t4);padding:2px 8px;border-radius:8px;white-space:nowrap}
.wbs-stat-chip.danger{background:var(--red-bg);color:var(--red)}
.wbs-stat-chip.prog{background:var(--amber-bg);color:var(--amber)}
.wbs-stat-chip.done{background:var(--green-bg);color:var(--green)}
.wbs-pct{font-size:14px;font-weight:800;color:var(--g3);min-width:34px;text-align:left}
.wbs-mini-bar{width:56px;height:3px;background:var(--s3);border-radius:4px;overflow:hidden;flex-shrink:0}
.wbs-mini-fill{height:100%;background:var(--g4);border-radius:4px;transition:width .6s var(--ease)}
.wbs-mini-fill.warn{background:var(--amber)}.wbs-mini-fill.danger{background:var(--red)}
.wbs-tasks{padding:3px 0}
.wbs-task-row{display:grid;grid-template-columns:20px 1fr 86px 73px 84px;gap:7px;align-items:center;padding:8px 15px;border-bottom:1px solid var(--b0);font-size:12px;transition:background .1s}
.wbs-task-row:last-child{border-bottom:none}
.wbs-task-row:hover{background:var(--g6)}
.wbs-task-row.overdue{background:var(--red-bg)}
.wbs-task-row.overdue:hover{background:#fde8e6}
.wbs-task-icon{text-align:center;font-size:11px;font-weight:700}
.wbs-task-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.wbs-task-name.done{text-decoration:line-through;color:var(--t4)}
.wbs-task-ass{color:var(--t4);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbs-task-due{color:var(--t4);font-size:12px;text-align:left;white-space:nowrap}
.wbs-task-due.overdue{color:var(--red);font-weight:700}.wbs-task-due.today{color:var(--amber);font-weight:700}
.wbs-task-status{text-align:center}
.wbs-col-heads{display:grid;grid-template-columns:20px 1fr 86px 73px 84px;gap:7px;padding:6px 15px;background:var(--s2);border-bottom:1px solid var(--b1);font-size:10px;font-weight:700;color:var(--t4);letter-spacing:.5px;text-transform:uppercase}
.wbs-footer{display:flex;gap:20px;padding:9px 15px;background:var(--g6);border-top:1px solid var(--b0);font-size:12px;color:var(--t3);flex-wrap:wrap}
.wbs-footer-stat strong{color:var(--t1);font-weight:700;margin-left:4px}

/* ═══════════════════════════════════════════════════════════════
   REPORTS PAGE — Product structure section
═══════════════════════════════════════════════════════════════ */
.rep-product-structure-wrap{
  margin-bottom:16px;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden;
}
.rep-struct-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--b0);
  background:var(--s1);
}
.rep-struct-title{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;color:var(--t1);
}
.rep-struct-sub{font-size:11px;color:var(--t4)}
.rep-proj-structure{padding:12px;display:flex;flex-direction:column;gap:10px}

/* Product block */
.rep-product-block{
  border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden;
}
.rep-product-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;gap:10px;
  background:var(--s2);border-bottom:1px solid var(--b0);
  flex-wrap:wrap;
}
.rep-product-hd-left{display:flex;align-items:center;gap:7px;flex:1}
.rep-product-name{font-size:13px;font-weight:800;color:var(--t1)}
.rep-product-late{
  font-size:10px;font-weight:700;color:var(--red);
  background:var(--red-bg);padding:2px 7px;border-radius:10px;
}
.rep-product-hd-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.rep-product-pct{font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap}
.rep-product-bar{width:60px;height:4px;background:var(--s4);border-radius:4px;overflow:hidden}
.rep-product-bar-fill{height:100%;border-radius:4px}

/* Project rows */
.rep-proj-rows{display:flex;flex-direction:column}
.rep-proj-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--b0);
  transition:background .1s;flex-wrap:wrap;
}
.rep-proj-row:last-child{border-bottom:none}
.rep-proj-row:hover{background:var(--s1)}
.rep-proj-row-name{
  display:flex;align-items:center;gap:7px;
  flex:1;min-width:160px;font-size:12.5px;font-weight:600;color:var(--t2);
}
.rpr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--s4)}
.rpr-late .rpr-dot{background:var(--red)}
.rpr-done .rpr-dot{background:var(--green)}
.rpr-prog .rpr-dot{background:var(--amber)}
.rpr-open .rpr-dot{background:var(--blue)}
.rep-proj-row-stats{
  display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.rpr-stat{font-size:11px;color:var(--t4)}
.rpr-done-num{color:var(--green);font-weight:600}
.rpr-late-num{color:var(--red);font-weight:700}
.rep-proj-row-bar{display:flex;align-items:center;gap:6px;min-width:100px}
.rpr-bar-wrap{flex:1;height:4px;background:var(--s3);border-radius:4px;overflow:hidden}
.rpr-bar-fill{height:100%;border-radius:4px;transition:width .6s}
.rpr-pct{font-size:11px;font-weight:700;color:var(--t3);min-width:30px;text-align:left}