/* ============================================================
   Project Detail (3-pane desktop / summary+tabs mobile) + Gantt
   ============================================================ */

/* ---------- Detail header ---------- */
.pd-head{ }
.pd-title-row{ display:flex; align-items:flex-start; gap:12px; }
.pd-title{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.pd-code{ font-size:12px; color:var(--faint); margin-top:3px; }

/* ---------- Mobile top summary card ---------- */
.summary-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px; margin-top:14px; }
.summary-card .sc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.summary-card .sc-row:last-child{ border-bottom:0; }
.summary-card .sc-row .k{ font-size:12.5px; color:var(--muted); }
.summary-card .sc-row .v{ font-size:13.5px; font-weight:600; text-align:right; }
.summary-card .sc-prog{ padding:10px 0 4px; }
.summary-card .sc-prog .pt{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:7px; }
.summary-card .sc-prog .pt b{ color:var(--ink); }
.budget-bar{ margin-top:3px; }
.budget-bar .bt{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px; }
.budget-bar .bt b{ color:var(--ink2); font-weight:600; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:3px; overflow-x:auto; margin-top:18px; border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar{ height:0; }
.tab{ white-space:nowrap; padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--muted);
  border:0; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:7px; }
.tab .tb-ct{ font-size:11px; font-weight:700; background:var(--raised2); color:var(--muted); padding:0 6px; border-radius:99px; }
.tab.on{ color:var(--accent); border-bottom-color:var(--accent); }
.tab.on .tb-ct{ background:var(--accent-soft); color:var(--accent); }

.tab-body{ margin-top:20px; }

/* ---------- Detail layout (desktop 3-pane) ---------- */
.pd-layout{ }
.pd-summary{ display:none; }
@media (min-width:1000px){
  .pd-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
  .pd-summary{ display:block; position:sticky; top:84px; }
  .summary-card.mobile-only{ display:none; }
}

/* ---------- Phase list ---------- */
.phase{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden; }
.phase .ph-h{ display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; }
.phase .ph-no{ width:30px; height:30px; border-radius:8px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; }
.phase .ph-name{ font-size:15px; font-weight:600; }
.phase .ph-en{ font-size:11.5px; color:var(--faint); }
.phase .ph-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.phase .ph-prog{ width:90px; }
.phase .ph-prog .pct{ font-size:11.5px; color:var(--muted); text-align:right; margin-bottom:5px; font-weight:600; }
.phase .ph-chev{ color:var(--faint); transition:transform .2s; }
.phase.open .ph-chev{ transform:rotate(90deg); }
.phase .ph-tasks{ border-top:1px solid var(--line-soft); padding:6px 16px 12px; }
.task-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.task-row:last-child{ border-bottom:0; }
.task-row .tk-ic{ width:20px; height:20px; flex:none; display:grid; place-items:center; }
.task-row .tk-name{ font-size:13.5px; font-weight:500; flex:1; }
.task-row.milestone .tk-name{ font-weight:600; }
.task-row .tk-dep{ font-size:11px; color:var(--faint); display:inline-flex; align-items:center; gap:4px; }

/* ---------- Detail mini cards / metrics ---------- */
.metric-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:1000px){ .metric-grid{ grid-template-columns:repeat(4,1fr); } }
.metric{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; box-shadow:var(--shadow); }
.metric .ml{ font-size:11.5px; color:var(--muted); }
.metric .mv{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:23px; font-weight:700; margin-top:6px; line-height:1; letter-spacing:-.01em; }
.metric .ms{ font-size:11px; color:var(--faint); margin-top:5px; }

/* ---------- Vendor rows ---------- */
.vendor{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.vendor:last-child{ border-bottom:0; }
.vendor .vn{ font-size:14px; font-weight:600; }
.vendor .vr{ font-size:12px; color:var(--muted); margin-top:2px; }
.vendor .vstage{ margin-left:auto; text-align:right; min-width:120px; }
.vendor .vstage .vbar{ margin-top:6px; }

/* ---------- Documents ---------- */
.doc-row{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-bottom:1px solid var(--line-soft); }
.doc-row:last-child{ border-bottom:0; }
.doc-ic{ width:38px; height:44px; border-radius:7px; background:var(--raised); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); flex:none; font-size:9px; font-weight:700; }
.doc-ic.boq{ color:var(--ok); } .doc-ic.quotation{ color:var(--info); } .doc-ic.contract{ color:var(--danger); } .doc-ic.drawing{ color:var(--warn); } .doc-ic.proposal{ color:var(--accent); }
.doc-row .dn{ font-size:13.5px; font-weight:600; }
.doc-row .dm{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.doc-row .dver{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); background:var(--raised2); padding:2px 8px; border-radius:6px; }

/* ---------- RACI ---------- */
.raci-table{ width:100%; border-collapse:collapse; font-size:13px; }
.raci-table th{ text-align:center; font-size:11px; font-weight:700; color:var(--faint); text-transform:uppercase; padding:9px 6px; border-bottom:1px solid var(--line); }
.raci-table th:first-child{ text-align:left; padding-left:16px; }
.raci-table td{ padding:11px 6px; text-align:center; border-bottom:1px solid var(--line-soft); }
.raci-table td:first-child{ text-align:left; padding-left:16px; }
.raci-badge{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; font-size:12px; font-weight:700; }
.raci-badge.R{ background:var(--info-bg); color:var(--info); }
.raci-badge.A{ background:var(--accent-soft); color:var(--accent); }
.raci-badge.C{ background:var(--warn-bg); color:var(--warn); }
.raci-badge.I{ background:var(--neutral-bg); color:var(--neutral); }

/* ============================================================
   GANTT
   ============================================================ */
.gantt-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.gantt-tools{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.gantt-tools .legend{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; }
.gantt-tools .lg{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.gantt-tools .lg .ln{ width:22px; height:0; border-top:2px solid var(--accent); }
.gantt-tools .lg .ln.hard{ border-top-style:solid; } .gantt-tools .lg .ln.soft{ border-top-style:dashed; }
.gantt-tools .lg .dia{ width:11px; height:11px; background:var(--accent); transform:rotate(45deg); }
.gantt-tools .lg .barx{ width:20px; height:10px; border-radius:3px; background:var(--accent); }

.gantt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gantt{ position:relative; min-width:760px; }
.gantt-head{ display:flex; border-bottom:1px solid var(--line); position:relative; }
.gantt-row-label{ flex:none; width:var(--lblw,184px); border-right:1px solid var(--line); }
.gantt-months{ position:relative; flex:1; height:46px; }
.gantt-month{ position:absolute; top:0; height:46px; border-left:1px solid var(--line-soft); padding:6px 8px; font-size:11.5px; font-weight:600; color:var(--ink2); }
.gantt-week{ position:absolute; top:26px; font-size:9.5px; color:var(--faint); padding-left:3px; }

.gantt-lane{ display:flex; border-bottom:1px solid var(--line-soft); position:relative; }
.gantt-lane:last-child{ border-bottom:0; }
.lane-label{ flex:none; width:var(--lblw,184px); border-right:1px solid var(--line); padding:11px 13px; display:flex; align-items:center; gap:10px; }
.lane-label .ph-no{ width:24px; height:24px; border-radius:6px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:11px; flex:none; }
.lane-label .ll-n{ font-size:13px; font-weight:600; line-height:1.2; }
.lane-label .ll-s{ font-size:10.5px; color:var(--faint); }
.lane-track{ position:relative; flex:1; }

.gbar{ position:absolute; height:24px; border-radius:7px; display:flex; align-items:center; padding:0 9px;
  font-size:11.5px; font-weight:600; color:var(--accent-fg); white-space:nowrap; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.12); cursor:default; }
.gbar.done{ background:var(--ok); }
.gbar.active{ background:var(--accent); }
.gbar.todo{ background:#B9B0A0; }
.gbar.blocked{ background:var(--danger); }
.gbar.phase{ height:14px; border-radius:5px; opacity:.32; font-size:0; }
.gbar .gfill{ position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.22); border-radius:7px 0 0 7px; }
.gmile{ position:absolute; width:16px; height:16px; transform:translateX(-50%) rotate(45deg); border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.gmile.done{ background:var(--ok); } .gmile.todo{ background:#B9B0A0; } .gmile.active{ background:var(--accent); }
.gmile-lbl{ position:absolute; font-size:11px; font-weight:600; color:var(--ink2); white-space:nowrap; }
.gantt-today{ position:absolute; top:0; bottom:0; width:2px; background:var(--danger); z-index:5; }
.gantt-today .tdot{ position:absolute; top:-1px; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--danger); }
.gantt-today .tlbl{ position:absolute; top:4px; left:-15px; font-size:9.5px; font-weight:700; color:var(--danger); background:var(--danger-bg); padding:1px 6px; border-radius:5px; }
.gantt-svg{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:visible; }