/* ═══════════════════════════════════════════════════════════════
   Manzoma Project Detail 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 PAGE OVERLAY
═══════════════════════════════════════════════════════════════ */
.proj-page-overlay{
  position:fixed;inset:0;z-index:900;
  background:var(--bg);overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateY(20px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.proj-page-overlay.open{opacity:1;pointer-events:all;transform:none}

.proj-page{max-width:1100px;margin:0 auto;padding:20px 20px 60px}

/* Header */
.pp-header{
  display:flex;align-items:center;gap:14px;
  background:var(--g1);border-radius:var(--r);
  padding:16px 20px;margin-bottom:14px;color:#fff;
}
.pp-back-btn{
  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;flex-shrink:0;white-space:nowrap;
}
.pp-back-btn:hover{background:rgba(255,255,255,.22)}
.pp-header-info{flex:1;min-width:0}
.pp-header-title{font-size:17px;font-weight:800;letter-spacing:-.3px}
.pp-header-sub{font-size:11px;opacity:.6;margin-top:2px}
.pp-ring-svg{flex-shrink:0}

/* KPI strip */
.pp-kpi-row{
  display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.pp-kpi{
  flex:1;min-width:80px;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r2);padding:12px 14px;text-align:center;
  box-shadow:var(--sh1);
}
.pp-kpi-val{font-size:22px;font-weight:800;line-height:1}
.pp-kpi-lbl{font-size:11px;color:var(--t4);font-weight:600;margin-top:3px}

/* Tabs */
.pp-tabs{
  display:flex;gap:3px;
  background:var(--s2);border-radius:12px;padding:3px;
  margin-bottom:14px;width:fit-content;
}
.pp-tab{
  padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--t3);background:transparent;border:none;cursor:pointer;
  transition:all .18s;
}
.pp-tab.active{background:var(--s0);color:var(--t1);box-shadow:var(--sh1)}
.pp-tab-body.hidden{display:none}

/* ── Weekly Cards ─────────────────────────────────────────── */
.pp-weekly-wrap{padding-bottom:8px}
.pp-weeks-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.pp-week-card{
  min-width:230px;max-width:260px;flex-shrink:0;
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
  box-shadow:var(--sh1);overflow:hidden;scroll-snap-align:start;
  transition:box-shadow .18s;
}
.pp-week-card:hover{box-shadow:var(--sh2)}
.pp-week-card.current{border:2px solid var(--g4);box-shadow:0 0 0 3px rgba(45,122,87,.12),var(--sh2)}
.pp-week-card.past{opacity:.72}

.pp-week-hd{
  padding:10px 13px;background:var(--s1);border-bottom:1px solid var(--b0);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.pp-week-num{font-size:12px;font-weight:800;color:var(--t1)}
.pp-now-badge{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;
  background:var(--g3);color:#fff;margin-right:3px;
}
.pp-week-range{font-size:11px;color:var(--t4);flex:1}
.pp-week-late{font-size:10px;color:var(--red);background:var(--red-bg);padding:1px 5px;border-radius:6px;font-weight:700}
.pp-week-cnt{font-size:11px;color:var(--t4);background:var(--s2);padding:1px 7px;border-radius:8px;font-weight:600}

.pp-week-tasks{padding:9px 10px;display:flex;flex-direction:column;gap:5px;min-height:52px}
.pp-wk-task{
  display:flex;align-items:flex-start;gap:6px;font-size:12px;
  padding:4px 6px;border-radius:6px;background:var(--s1);
}
.pp-wk-task.done{opacity:.55;text-decoration:line-through}
.pp-wk-task.overdue{background:var(--red-bg)}
.pp-wk-task.today{background:var(--amber-bg)}
.pp-wk-dot{font-size:11px;flex-shrink:0;margin-top:1px}
.pp-wk-name{flex:1;min-width:0;color:var(--t1);font-weight:600;line-height:1.4}
.pp-wk-divider{
  text-align:center;font-size:10px;color:var(--t4);
  border-top:1px solid var(--b0);padding:5px 0 3px;
}
.pp-wk-empty{text-align:center;padding:12px;font-size:11px;color:var(--t4)}

.pp-nodate{
  margin-top:14px;background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r2);padding:12px;box-shadow:var(--sh1);
}
.pp-nodate-title{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:8px}

/* ── Gantt Chart — Desktop ───────────────────────────────── */
.ppg-desktop{
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh1);
}
.ppg-scale{
  height:26px;position:relative;background:var(--s1);
  border-bottom:1px solid var(--b0);overflow:hidden;
}
.ppg-scale-lbl{
  position:absolute;font-size:10px;color:var(--t4);font-weight:600;
  top:6px;transform:translateX(50%);white-space:nowrap;
}
.ppg-scale-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--b0)}
.ppg-today-tick{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--amber);opacity:.8;
}
.ppg-rows{display:flex;flex-direction:column}
.ppg-row{
  display:flex;align-items:center;border-bottom:1px solid var(--b0);
  min-height:38px;transition:background .13s;
}
.ppg-row:hover{background:var(--s1)}
.ppg-row.done{opacity:.6}
.ppg-label{
  width:200px;flex-shrink:0;padding:0 12px;font-size:12px;font-weight:600;
  color:var(--t1);display:flex;align-items:center;gap:6px;
  border-left:1px solid var(--b0);white-space:nowrap;overflow:hidden;
}
.ppg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ppg-chart{flex:1;position:relative;height:38px;overflow:hidden}
.ppg-today{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);opacity:.6;z-index:2}
.ppg-bar{position:absolute;top:12px;height:14px;border-radius:4px;z-index:1}
.ppg-diamond{
  position:absolute;top:6px;font-size:14px;z-index:3;
  transform:translateX(50%);line-height:1;
}
.ppg-due-lbl{
  position:absolute;bottom:2px;font-size:10px;color:var(--t3);
  transform:translateX(50%);white-space:nowrap;z-index:4;
}

/* ── Gantt Chart — Mobile ────────────────────────────────── */
.ppg-mobile{display:none;flex-direction:column;gap:7px;padding-top:4px}
.ppg-m-card{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r2);padding:10px 12px;box-shadow:var(--sh1);
}
.ppg-m-card.done{opacity:.6}
.ppg-m-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.ppg-m-body{flex:1;min-width:0}
.ppg-m-name{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:5px}
.ppg-m-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ppg-m-due{font-size:12px;font-weight:700}

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

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:767px){
  .ppg-desktop{display:none}
  .ppg-mobile{display:flex}
  .pp-weeks-row{padding-bottom:12px}
  .ps-org-groups-row{gap:10px}
  .ps-org-group{min-width:130px;max-width:200px}
  .ps-org-root-node{padding:10px 16px}
  .ps-org-root-title{font-size:13px}
}
@media(min-width:768px){
  .ppg-desktop{display:block}
  .ppg-mobile{display:none}
}

/* Gantt page styles moved to styles/pages/gantt.css. */

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

/* ═══════════════════════════════════════════════════════════════
   WBS MODAL (full-screen panel)
═══════════════════════════════════════════════════════════════ */
.wbs-overlay{display:none;position:fixed;inset:0;background:rgba(8,22,14,.55);z-index:1000;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wbs-overlay.open{display:block}
.wbs-panel{display:none;position:fixed;top:12px;left:12px;right:12px;bottom:12px;background:var(--s0);border-radius:var(--r);z-index:1001;flex-direction:column;overflow:hidden;box-shadow:var(--sh3);border:1px solid var(--b0)}
.wbs-panel.open{display:flex}
.wbs-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;flex-shrink:0;background:var(--g2);color:#fff;gap:11px}
.wbs-hd-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wbs-hd-title{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbs-hd-sub{font-size:11px;color:rgba(255,255,255,.42);font-weight:500;letter-spacing:.3px}
.wbs-close{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .14s}
.wbs-close:hover{background:rgba(255,255,255,.2)}
.wbs-body{flex:1;display:flex;overflow:hidden;min-height:0}
.wbs-tree-panel{width:38%;min-width:230px;max-width:370px;border-left:1px solid var(--b0);overflow-y:auto;padding:16px 14px;background:var(--s1);display:flex;flex-direction:column;gap:9px}
.wbs-gantt-panel{flex:1;min-width:0;overflow:auto;padding:16px 18px;background:var(--s0)}/* Proj cards */
.pf-proj-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh1)}/* Task items */
.pf-filter-wrap{padding:10px 16px 4px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}/* Team in portfolio */
.pf-member-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);margin:0 16px 10px;padding:16px;box-shadow:var(--sh1)}/* Portfolio report */
.pf-rep-section{background:var(--s0);border-radius:var(--r);margin:0 16px 11px;padding:14px;box-shadow:var(--sh1);border:1px solid var(--b0)}/* Portfolio nav */
.pf-bottom-nav{
  flex-shrink:0;width:100%;background:var(--s0);
  border-top:1px solid var(--b0);
  display:flex;padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -2px 12px rgba(0,0,0,.05);
}

/* ═══════════════════════════════════════════════════════════════
   WBS MODAL MOBILE
═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .wbs-panel{top:6px;left:6px;right:6px;bottom:6px;border-radius:20px}
  .wbs-body{flex-direction:column}
  .wbs-tree-panel{width:100%;min-width:0;max-width:none;border-left:none;border-bottom:1px solid var(--b0);max-height:42vh}
  .wbs-gantt-panel{overflow-x:auto}
  .wbs-hd-title{font-size:13px}
  .wbs-foot-pct{font-size:17px}
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT GANTT (ppg-*) — CSS for buildProjectGantt()
═══════════════════════════════════════════════════════════════ */
.ppg-desktop{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);overflow:hidden;
}
.ppg-scale{
  position:relative;height:28px;
  background:var(--s2);border-bottom:1px solid var(--b1);
  overflow:hidden;
}
.ppg-scale-lbl{
  position:absolute;top:6px;
  font-size:10px;font-weight:700;color:var(--t4);
  transform:translateX(50%);white-space:nowrap;
}
.ppg-scale-tick{
  position:absolute;top:0;bottom:0;
  width:1px;background:var(--b1);
}
.ppg-today-tick{
  position:absolute;top:0;bottom:0;
  width:2px;background:var(--g4);opacity:.6;
}
.ppg-rows{display:flex;flex-direction:column}
.ppg-row{
  display:flex;align-items:center;
  border-bottom:1px solid var(--b0);min-height:36px;
}
.ppg-row:last-child{border-bottom:none}
.ppg-row.done{opacity:.55}
.ppg-label{
  width:180px;min-width:180px;
  padding:6px 12px;border-left:1px solid var(--b0);
  font-size:12px;font-weight:600;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.ppg-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.ppg-chart{
  flex:1;position:relative;min-height:36px;overflow:hidden;
}
.ppg-today{
  position:absolute;top:0;bottom:0;
  width:2px;background:var(--g4);opacity:.5;z-index:2;
}
.ppg-bar{
  position:absolute;top:12px;height:10px;
  border-radius:4px 0 0 4px;min-width:3px;
  transition:opacity .2s;
}
.ppg-diamond{
  position:absolute;top:6px;
  font-size:16px;line-height:1;z-index:1;
  transform:translateX(50%);
}
.ppg-due-lbl{
  position:absolute;bottom:3px;
  font-size:9px;font-weight:700;color:var(--t4);
  transform:translateX(50%);white-space:nowrap;
}

/* Mobile gantt */
.ppg-mobile{display:none}
@media(max-width:640px){
  .ppg-desktop{display:none}
  .ppg-mobile{
    display:flex;flex-direction:column;gap:6px;
    background:var(--s0);border:1px solid var(--b0);
    border-radius:var(--r);padding:10px;
  }
  .ppg-m-card{
    display:flex;align-items:flex-start;gap:8px;
    padding:8px 10px;border-radius:6px;
    background:var(--s1);border:1px solid var(--b0);
  }
  .ppg-m-card.done{opacity:.6}
  .ppg-m-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
  .ppg-m-body{flex:1;min-width:0}
  .ppg-m-name{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px}
  .ppg-m-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .ppg-m-due{font-size:11px;font-weight:700}
}

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

/* ═══════════════════════════════════════════════════════════════
   WBS — Professional improvements
═══════════════════════════════════════════════════════════════ */

/* Project block hover */
.wbs-proj-block{
  transition:box-shadow .15s;
}
.wbs-proj-block:hover{box-shadow:var(--sh2)}

/* Better project header */
.wbs-proj-header{
  gap:8px;
}
.wbs-proj-icon-name{
  min-width:0;flex:1;
}
.wbs-proj-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:260px;
}

/* Task row improvements */
.wbs-task-row{
  transition:background .1s;
  align-items:center;
}
.wbs-task-name{
  font-size:12.5px;
}

/* Mini progress bar — wider */
.wbs-mini-bar{
  width:70px;height:4px;
}

/* WBS summary bar */
.wbs-summary-top{
  display:flex;align-items:center;gap:16px;
  padding:14px 20px;
  background:linear-gradient(135deg,var(--g5),var(--g6));
  border-radius:var(--r2);margin-bottom:14px;
  border:1px solid var(--g4);
  flex-wrap:wrap;
}
.wbs-summary-title{font-size:13px;font-weight:800;color:var(--g1)}
.wbs-summary-stats{display:flex;gap:14px;flex-wrap:wrap;flex:1;align-items:center}
.wbs-summary-stat{font-size:12.5px;color:var(--t2)}
.wbs-summary-stat strong{font-weight:800;margin-left:3px}
.wbs-summary-bar-wrap{
  flex:1;min-width:100px;height:7px;
  background:var(--s3);border-radius:4px;overflow:hidden;
}
.wbs-summary-bar-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--g3),var(--g2));
  transition:width .8s var(--ease);
}

/* Col heads sticky */
.wbs-col-heads{
  position:sticky;top:0;z-index:1;
}

/* Empty WBS */
.wbs-proj-empty{
  padding:24px;text-align:center;
  color:var(--t4);font-size:12.5px;
}

/* ═══════════════════════════════════════════════════════════════
   WBS TREE — Project page inline + panel
═══════════════════════════════════════════════════════════════ */

/* Inline wrap — tree + gantt side by side */
.wbs-inline-wrap{
  display:flex;gap:0;min-height:300px;
}
.wbs-inline-tree{
  width:280px;min-width:240px;flex-shrink:0;
  border-left:1px solid var(--b0);
  overflow-y:auto;max-height:460px;
  padding:12px;
}
.wbs-inline-gantt{
  flex:1;min-width:0;overflow-x:auto;
  padding:12px;
}

/* Root node */
.wbs-root-node{
  font-size:13px;font-weight:800;color:var(--t1);
  padding:8px 10px;margin-bottom:10px;
  background:var(--g5);border-radius:6px;
  border-right:3px solid var(--g3);
}

/* Phase blocks */
.wbs-phase{
  margin-bottom:8px;border-radius:6px;overflow:hidden;
  border:1px solid var(--b0);
}
.wbs-phase-hd{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;font-size:11px;font-weight:700;
  background:var(--s2);
}
.wbs-phase-cnt{
  margin-right:auto;font-size:10px;font-weight:800;
  background:var(--s3);padding:1px 7px;border-radius:8px;color:var(--t3);
}
.wbs-phase-done .wbs-phase-hd{background:var(--green-bg);color:var(--green)}
.wbs-phase-late .wbs-phase-hd{background:var(--red-bg);color:var(--red)}
.wbs-phase-prog .wbs-phase-hd{background:var(--amber-bg);color:var(--amber)}
.wbs-phase-pend .wbs-phase-hd{background:var(--s2);color:var(--t3)}

/* Task list */
.wbs-task-list{padding:4px 0}
.wbs-task-item{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;transition:background .1s;
  border-bottom:1px solid var(--b0);
}
.wbs-task-item:last-child{border-bottom:none}
.wbs-task-item:hover{background:var(--s1)}
.wbs-task-dot{
  width:6px;height:6px;border-radius:50%;
  flex-shrink:0;background:var(--t4);
}
.wbs-phase-done .wbs-task-dot{background:var(--green)}
.wbs-phase-late .wbs-task-dot{background:var(--red)}
.wbs-phase-prog .wbs-task-dot{background:var(--amber)}
.wbs-task-name{
  flex:1;font-size:11.5px;color:var(--t2);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wbs-task-date{font-size:10px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.wbs-more-lbl{
  font-size:10px;color:var(--t4);padding:5px 10px;
  font-style:italic;
}

/* Gantt inside WBS */
.wbs-nodate-msg{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:32px;color:var(--t4);font-size:13px;text-align:center;
}

/* Mobile */
@media(max-width:640px){
  .wbs-inline-wrap{flex-direction:column}
  .wbs-inline-tree{width:100%;max-height:300px;border-left:none;border-bottom:1px solid var(--b0)}
}

/* ══════════════════════════════════════════════════════════════
   PROJECT PAGE — Files Section
   ══════════════════════════════════════════════════════════════ */

.pp-files-section {
  padding: 12px 16px;
  background: var(--bg2);
  border-radius: 10px;
  border: 1px solid var(--b2);
  margin-bottom: 14px;
}

.pp-files-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.pp-files-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pp-file-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--b2);
  background: var(--bg);
  cursor: pointer;
  transition: all .15s;
  flex: 1;
  min-width: 120px;
}
.pp-file-item:hover {
  border-color: var(--s4);
  transform: translateY(-1px);
}
.pp-file-done {
  border-color: #2A6B50;
  background: #F0FDF4;
}

.pp-file-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: transparent;
  flex-shrink: 0;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.pp-file-dot-done {
  background: #2A6B50;
  border-color: #2A6B50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-file-dot-done::after {
  content: '✓';
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.pp-file-icon { font-size: 15px; }
.pp-file-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
}
.pp-file-done .pp-file-label { color: #2A6B50; }


@media(min-width:768px){
  .ham-btn{display:none}
}