/* =====================================================================
   V3 construction PM tool: /edarat-mashari-binaa (demo), /my-projects, /my-projects/{id} (workspace).
   _sync/v3sweep/DESIGN.md §5. Tokens only (light + dark come from v3.css), every class prefixed pm-.
   ===================================================================== */

/* ---------- page head ---------- */
.pm-head .pm-h1{margin-top:8px}
.pm-head .pm-lead{margin-top:8px;max-width:76ch}
.pm-head .pm-lead strong{color:var(--ink);font-weight:600}
.pm-tags{margin-top:14px}
.pm-head .row1{align-items:center}
.pm-ws-h1{overflow-wrap:anywhere;min-width:0}
.pm-head .acts{align-items:center}
.pm-saved{min-height:26px}

/* ---------- body ---------- */
.pm-body{display:flex;flex-direction:column;gap:18px;padding-bottom:56px}
.pm-banner{flex-wrap:wrap;align-items:center}
.pm-banner p{flex:1 1 200px;min-width:0}
.pm-banner .btn{flex:0 0 auto}
.pm-banner-note{opacity:.85}
.pm-flash+.pm-flash{margin-top:-8px}

/* perspective bar */
.pm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.pm-seg button{display:inline-flex;align-items:center;gap:7px}
.pm-role{min-width:220px;padding:10px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);line-height:1.7}

/* project title block */
.pm-proj-hd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:14px}
.pm-proj-hd .h3{overflow-wrap:anywhere}
.pm-tb dd{line-height:1.6}
.pm-tb .tb-code dd.pm-tb-ar{font-family:var(--f-body);direction:rtl;text-align:start}

/* KPIs */
.pm-kpis .kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.pm-kpis .kpi .d{font-weight:500}
.pm-kpis .meter{margin-top:auto;transform:translateY(4px)}
.pm-kpis .kpi .v{overflow-wrap:anywhere}
.pm-kpis .pm-k-next .v{font-size:16px;line-height:1.6;font-weight:600}
.pm-kpis .kpi.warn .v{color:var(--warn)}
.pm-kpis .kpi.warn .meter>i{background:var(--warn)}

/* tabs + panels */
.pm-tabs{margin-top:4px}
.pm-panel{padding-top:16px}
.pm-panel-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}

/* phases (built by pm.js) */
.pm-phase{overflow:clip}
.pm-ph-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px}
.pm-ph-sum::-webkit-details-marker{display:none}
.pm-ph-sum:hover{background:var(--paper-2)}
.pm-ph-ic{width:42px;height:42px;border-radius:var(--r);background:var(--paper-3);color:var(--brand-ink);display:grid;place-items:center;flex:0 0 auto}
.pm-phase[data-state="2"] .pm-ph-ic{background:var(--ok-tint);color:var(--ok)}
.pm-phase[data-state="1"] .pm-ph-ic{background:var(--brand-tint);color:var(--brand-ink)}
.pm-ph-main{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.pm-ph-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pm-ph-nm b{font-size:15.5px;line-height:1.5}
.pm-ph-prog{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pm-ph-prog .meter{display:block;width:78px}
.pm-ph-prog b{min-width:40px;text-align:end;font-size:14px}
.pm-ph-chev{color:var(--muted);transition:transform var(--t) var(--ease);flex:0 0 auto}
.pm-phase[open] .pm-ph-chev{transform:rotate(180deg)}
.pm-ph-bd{border-top:1px solid var(--line-2);background:var(--paper-2);padding:6px 16px 10px}
.pm-ms{padding:9px 0;border-bottom:1px solid var(--line-2);align-items:center;min-height:44px}
.pm-ms:last-child{border-bottom:0}
.pm-ms input{margin-top:0;flex:0 0 auto}
.pm-ms input:checked+span,.pm-task.is-done .pm-task-t{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}

/* Gantt: scrolls inside its own box, never the page */
.pm-gantt{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 16px;max-width:100%}
.pm-gantt:focus-visible{box-shadow:var(--ring)}
.pm-g-grid{display:grid;grid-template-columns:150px minmax(0,1fr);row-gap:8px;min-width:640px;position:relative;padding-top:24px}
.pm-g-months{grid-column:2;position:relative;height:26px;border-bottom:1px solid var(--line)}
.pm-g-m{position:absolute;top:0;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;padding-inline-start:4px;border-inline-start:1px solid var(--line);line-height:20px}
.pm-g-lbl{grid-column:1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;padding-inline-end:10px;min-height:34px}
.pm-g-lbl .i{color:var(--brand-ink)}
.pm-g-track{grid-column:2;position:relative;min-height:34px;border-radius:var(--r-sm);background-color:var(--paper-2);background-image:linear-gradient(to left,var(--line-2) 1px,transparent 1px);background-position:right top}
.pm-g-bar{position:absolute;top:5px;bottom:5px;border-radius:var(--r-xs);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-tint-2);min-width:8px}
.pm-g-fill{position:absolute;top:0;bottom:0;right:0;border-radius:var(--r-xs);background:var(--brand)}
.pm-g-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;line-height:1.6;padding:0 6px;border-radius:var(--pill);background:var(--paper);color:var(--brand-ink);white-space:nowrap;box-shadow:var(--sh-1);z-index:1}
.pm-g-now{grid-column:2;position:relative;pointer-events:none;z-index:2}
.pm-g-now i{position:absolute;top:-4px;bottom:-4px;width:0;border-inline-start:2px dashed var(--accent)}
.pm-g-now b{position:absolute;top:-24px;transform:translateX(50%);font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-tint);border-radius:var(--r-xs);padding:0 6px;line-height:1.7;white-space:nowrap}
.pm-g-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.pm-g-legend span{display:inline-flex;align-items:center;gap:6px}
.pm-g-legend i{width:14px;height:10px;border-radius:3px;display:inline-block}
.pm-g-legend .done{background:var(--brand)}
.pm-g-legend .left{background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-tint-2)}
.pm-g-legend .now{width:0;height:12px;border-radius:0;border-inline-start:2px dashed var(--accent)}

/* payments */
.pm-chips{margin-bottom:12px}
.pm-chips .tag{white-space:normal;line-height:1.6;padding-block:4px}
.pm-paytbl td,.pm-paytbl th{vertical-align:middle}
.pm-paytbl tfoot th,.pm-paytbl tfoot td{background:var(--paper-2);border-bottom:0;border-top:1px solid var(--line);color:var(--ink)}
.pm-pay{border:0;background:none;padding:0;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;border-radius:var(--r-xs)}
.pm-pay .tag{font-size:12.5px;padding:3px 10px}
.pm-pay:hover .tag{box-shadow:inset 0 0 0 1px currentColor}
.pm-disc{margin-top:10px}

/* documents */
.pm-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.pm-doc{align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);min-height:46px;background:var(--paper)}
.pm-doc input{margin-top:0;flex:0 0 auto}
.pm-doc.is-done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:var(--ok-tint)}
.pm-docs-ft{display:flex;align-items:center;gap:12px;margin-top:14px}
.pm-docs-ft .meter{flex:1 1 auto}
.pm-docs-ft p{flex:0 0 auto}

/* tasks */
.pm-tasks{display:flex;flex-direction:column}
.pm-task{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-2);min-height:46px}
.pm-task:last-child{border-bottom:0}
.pm-task .check{flex:1 1 auto;min-width:0;align-items:center}
.pm-task .check input{margin-top:0;flex:0 0 auto}
.pm-task-t{overflow-wrap:anywhere;min-width:0}
.pm-task .btn-text{color:var(--muted);flex:0 0 auto;min-width:36px}
.pm-task .btn-text:hover{color:var(--bad);background:var(--bad-tint)}
.pm-empty-t{padding:8px 0}
.pm-addrow{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.pm-addrow .input{flex:1 1 auto;min-width:0}

/* files */
.pm-up-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.pm-up-wide{grid-column:1/-1}
.pm-drop{cursor:pointer}
.pm-drop:focus-within{box-shadow:var(--ring)}
.pm-drop.has-file{border-style:solid;border-color:var(--brand);background:var(--brand-tint)}
#pm-drop-t{overflow-wrap:anywhere}
.pm-up-ft{margin-top:14px}
.pm-files{margin-top:14px}
.pm-f-main{display:flex;gap:12px;align-items:flex-start;min-width:0;flex:1 1 auto}
.pm-f-ic{width:40px;height:40px;border-radius:var(--r);background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center;flex:0 0 auto}
.pm-f-t{overflow-wrap:anywhere}
.pm-f-acts{flex:0 0 auto}
.pm-secure{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pm-files-demo .pm-empty-ic{width:64px;height:64px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center}
.pm-files-demo p.small{max-width:52ch}

/* guide / SEO */
.pm-seo{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.pm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pm-steps .how-step{gap:8px}
.pm-step-ic{width:36px;height:36px;border-radius:var(--r);background:var(--paper-3);color:var(--brand-ink);display:grid;place-items:center}
.pm-faq-ul{list-style:disc;padding-inline:38px 18px;padding-bottom:8px;color:var(--text)}
.pm-faq-ul li{padding-block:2px}
.pm-faq details p strong{color:var(--ink);font-weight:600}
.pm-src{line-height:1.9}
.pm-guide>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:600;color:var(--ink);min-height:52px}
.pm-guide>summary::-webkit-details-marker{display:none}
.pm-guide>summary>.i:first-child{color:var(--brand-ink)}
.pm-guide-chev{color:var(--muted);transition:transform var(--t) var(--ease)}
.pm-guide[open] .pm-guide-chev{transform:rotate(180deg)}
.pm-guide-bd{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px}

/* CTA + danger zone */
.pm-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-block:28px;margin-top:6px}
.pm-danger{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--bad) 35%,var(--line));border-radius:var(--r-lg)}

/* edit dialog */
.pm-sheet{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.pm-sheet form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.pm-sheet .sheet-bd{overflow-y:auto;min-height:0}
.pm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.pm-sheet .igroup .input{min-width:0}

/* ---------- /my-projects ---------- */
.pm-my-wrap{max-width:1000px;padding-bottom:56px}
.pm-my-grid{margin-bottom:24px}
.pm-my-card{display:flex;flex-direction:column;gap:10px;min-width:0;color:inherit}
.pm-my-card .h4{overflow-wrap:anywhere}
.pm-my-prog{display:flex;align-items:center;gap:10px}
.pm-my-prog .meter{flex:1 1 auto}
.pm-my-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)}
.pm-my-foot .pm-my-open{margin-inline-start:auto;color:var(--brand-ink);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.pm-my-empty{margin-bottom:24px}
.pm-my-new .pm-my-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.pm-my-new .pm-my-wide{grid-column:1/-1}
.pm-my-new-ft{display:flex;justify-content:flex-end;margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .pm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-my-new .pm-my-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pm-body{gap:14px}
  .pm-bar{flex-direction:column;align-items:stretch}
  .pm-seg{display:flex}
  .pm-seg button{flex:1 1 0;justify-content:center;min-height:44px}
  .pm-tb-acts{width:100%}
  .pm-tb-acts .btn{flex:1 1 0;min-height:44px}
  .pm-ph-sum{padding:12px;gap:10px}
  .pm-ph-ic{width:38px;height:38px}
  .pm-ph-prog .meter{display:none}
  .pm-docs,.pm-up-grid,.pm-steps{grid-template-columns:minmax(0,1fr)}
  .pm-pay{min-height:44px}
  .pm-addrow .btn{min-height:46px}
  .pm-f-acts{width:100%}
  .pm-f-acts .btn{min-height:40px}
  .pm-danger .btn{width:100%}
  .pm-my-new .pm-my-grid3{grid-template-columns:minmax(0,1fr)}
  .pm-my-new-ft .btn{width:100%}
}
@media (max-width:480px){
  .pm-grid2{grid-template-columns:minmax(0,1fr)}
  .pm-kpis .kpi{padding:14px}
  .pm-kpis .kpi .v{font-size:19px}
  .pm-kpis .pm-k-next .v{font-size:14.5px}
}
@media (pointer:coarse){.pm-task .btn-text{min-height:44px;min-width:44px}}

/* ---------- print: every panel, no site chrome, no controls ---------- */
@media print{
  .pricestrip,.appbar,.footer,.drawer,.actionbar,.flashbox,.skip,.banbar,.crumbs,
  .pm-banner,.pm-bar .seg,.pm-tb-acts,.pm-tabs,.pm-addrow,.pm-task .btn-text,.pm-up,.pm-f-acts,.pm-cta,.pm-danger,
  .pm-scrim,#v3sheet,.pm-head .acts,.pm-seo,.pm-guide,.pm-flash,.pm-tags,noscript{display:none!important}
  .app{background:var(--paper)}
  .pagehead{border:0;padding-block:0 6px}
  .pm-body{padding-block:6px 0;gap:12px}
  .pm-panels>[data-panel],.pm-panels>[data-panel][hidden]{display:block!important}
  .pm-panel{padding-top:10px}
  .card,.kpi,.pm-phase,.pm-doc,.pm-task,.pt-list li,.pm-g-grid{break-inside:avoid}
  .pm-gantt{overflow:visible}
  .pm-g-grid{min-width:0}
  .meter,.meter>i,.pm-g-bar,.pm-g-fill,.pm-g-track,.titleblock .tb-code,.tag,.status{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pm-ph-chev{display:none}
}