/* portfolio.css — Portfolio / Project Monitor (S46)
 * แยกไฟล์จาก app.css (กันชนงาน ซี slip-label ที่แก้ app.css ขนาน) · โหลดผ่าน layout.html
 * ทุกสีมาจาก CSS var (light+dark auto · ❌ ไม่ hardcode hex) · Even-Pixel (เลขคู่ ยกเว้น 1px/pill)
 * RAG chip = dual-encode: tint bg + -text fg (WCAG §1.1) + icon + label + shape (ไม่พึ่งสีเดียว · SC 1.4.1)
 */

/* ---------- layout ---------- */
.pf-page{ padding:20px; max-width:1440px; margin:0 auto; }
.pf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pf-head h1{ display:flex; align-items:center; gap:10px; }
.pf-head h1 i.fi{ width:28px; height:28px; flex:0 0 28px; border-radius:50%;
  background:color-mix(in srgb, var(--primary-solid) 12%, transparent); color:var(--primary-solid);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.pf-sub{ color:var(--text-2); font-size:13px; margin-top:2px; overflow-wrap:anywhere; }

/* ---------- summary strip ---------- */
.pf-summary{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:18px; }
.pf-stat{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px;
  box-shadow:0 1px 4px rgba(0,0,0,.06); min-width:0; }
.pf-stat .stat-value{ font-size:34px; }          /* summary tile เล็กกว่า hero 44 นิด (กริดหลายใบ) */
.pf-stat-lab{ color:var(--text-2); font-size:13px; margin-top:2px; overflow-wrap:anywhere; }

/* health distribution mini stacked bar (dual-encode: bar + legend count) */
.pf-dist-bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-2); margin:6px 0 10px; }
.pf-dist-seg{ height:100%; }
/* divider ระหว่าง segment ที่ชนกัน (adjacent boundary ≥3:1 · เอส B1 · reuse --surface ไม่มี token ใหม่) */
.pf-dist-seg + .pf-dist-seg{ box-shadow: inset 1px 0 0 var(--surface); }
.pf-dist-seg--green{ background:var(--green-text); }
.pf-dist-seg--amber{ background:var(--warm-text); }
.pf-dist-seg--red{ background:var(--alert-text); }
.pf-dist-seg--neutral{ background:var(--border-control); }
.pf-dist-legend{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.pf-dist-leg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); }
.pf-dist-sw{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.pf-dist-sw--green{ background:var(--green-text); }
.pf-dist-sw--amber{ background:var(--warm-text); }
.pf-dist-sw--red{ background:var(--alert-text); }
.pf-dist-sw--neutral{ background:var(--border-control); }
.pf-dist-leg strong{ color:var(--text); font-weight:600; }

/* ---------- toolbar (view toggle / sort / filter) ---------- */
.pf-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pf-toolbar-spacer{ flex:1 1 auto; }
.pf-seg{ display:inline-flex; background:var(--surface-2); border-radius:10px; padding:2px; gap:2px; }
.pf-seg a{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:8px;
  color:var(--text-2); font-size:13px; font-weight:500; text-decoration:none; min-height:44px; } /* touch ≥44px (เต๋ #9) */
.pf-seg a.is-active{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.pf-seg a:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; }

/* ---------- RAG chip (dual-encode · icon+label+color+shape) ---------- */
.pf-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; border:1px solid transparent; }
.pf-chip i.fi{ font-size:12px; display:inline-flex; align-items:center; line-height:1; }
.pf-chip--green{ color:var(--green-text); background:color-mix(in srgb, var(--green) 14%, transparent); }
.pf-chip--amber{ color:var(--warm-text);  background:color-mix(in srgb, var(--warm) 16%, transparent); }
.pf-chip--red{   color:var(--alert-text); background:color-mix(in srgb, var(--alert) 12%, transparent); }
.pf-chip--neutral{ color:var(--text-2); background:var(--surface-2); }
/* trigger chip = ปุ่มหลัก → hit-area ≥44px ด้วย ::after (ไม่เปลี่ยนขนาดที่เห็น · เหมือน .iconbtn app.css · เต๋ B2) */
button.pf-chip{ cursor:pointer; position:relative; }
button.pf-chip::after{ content:''; position:absolute; inset:-9px; } /* ~27+18=45 ≥44px (DS §0.10) */
button.pf-chip:hover{ filter:brightness(.97); }
button.pf-chip:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; }
.pf-chip-ovr{ font-size:11px; opacity:.9; margin-left:2px; }   /* override marker (user-pen) */

/* ---------- monitor table ---------- */
.pf-tablewrap{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.pf-tablescroll{ overflow-x:auto; }
.pf-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pf-table th, .pf-table td{ padding:12px 14px; text-align:left; vertical-align:middle; }
.pf-table thead th{ font-size:12px; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--border);
  white-space:nowrap; background:var(--surface); position:sticky; top:0; z-index:1; }
.pf-table th.pf-num, .pf-table td.pf-num{ text-align:right; }
.pf-table tbody tr{ border-bottom:1px solid var(--border); }
.pf-table tbody tr:last-child{ border-bottom:0; }
.pf-table tbody tr:hover{ background:var(--surface-2); }
.pf-th-sort{ display:inline-flex; align-items:center; gap:4px; color:inherit; text-decoration:none; }
.pf-th-sort.is-active{ color:var(--text); }
.pf-th-sort:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; border-radius:4px; }

.pf-proj{ min-width:0; }
.pf-proj-name{ font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.pf-proj-client{ font-size:12px; color:var(--text-2); overflow-wrap:anywhere; }
.pf-owner{ display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere; }
.pf-owner .avatar{ width:24px; height:24px; font-size:11px; flex:0 0 24px; }
.pf-owner-none{ color:var(--text-2); }

/* progress bar (reuse Bar Chart pattern · secondary fill = progress ทั่วไป ไม่ใช่สถานะ) */
.pf-prog{ display:flex; flex-direction:column; gap:2px; min-width:120px; }
.pf-prog-track{ position:relative; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.pf-prog-fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:999px; background:var(--secondary); }
.pf-prog-meta{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--text-2); }
.pf-prog-pct{ font-weight:600; color:var(--text); }

.pf-slip-late{ color:var(--alert-text); font-weight:600; }
.pf-slip-early{ color:var(--green-text); font-weight:600; }
.pf-slip-none{ color:var(--text-2); }
.pf-overdue-has{ color:var(--alert-text); font-weight:600; }
.pf-overdue-zero{ color:var(--text-2); }
.pf-ms{ display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere; }
.pf-ms i.fi{ color:var(--text-2); font-size:12px; }        /* default = muted (ไกล) */
.pf-ms--near i.fi{ color:var(--warm-text); }              /* ภายใน 7 วัน = เตือน (เต๋ minor) */
.pf-muted{ color:var(--text-2); }
.pf-stale{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--warm-text);
  background:var(--warn-bg); padding:2px 6px; border-radius:6px; margin-left:6px; }

/* ---------- why-popover (native Popover API · top-layer + light-dismiss ฟรี) ---------- */
.pf-why{ border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text);
  padding:16px; width:min(340px, 92vw); box-shadow:0 8px 28px rgba(0,0,0,.18); }
.pf-why:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; }
.pf-why-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-weight:600; overflow-wrap:anywhere; }
.pf-why-drv{ display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-top:1px solid var(--border); }
.pf-why-drv:first-of-type{ border-top:0; }
.pf-why-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; margin-top:5px; }
.pf-why-dot--green{ background:var(--green-text); }
.pf-why-dot--amber{ background:var(--warm-text); }
.pf-why-dot--red{ background:var(--alert-text); }
.pf-why-dot--neutral{ background:var(--border-control); }
.pf-why-dtxt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.pf-why-dlab{ display:block; font-weight:600; font-size:13px; overflow-wrap:anywhere; }
.pf-why-ddet{ display:block; font-size:12px; color:var(--text-2); overflow-wrap:anywhere; }
.pf-why-note{ margin-top:10px; padding:10px; border-radius:10px; background:var(--surface-2);
  font-size:13px; overflow-wrap:anywhere; }
.pf-why-note-lab{ font-size:11px; color:var(--text-2); display:block; margin-bottom:2px; }
.pf-why-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ---------- card grid (alternate view) ---------- */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.pf-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:10px; min-width:0; }
.pf-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pf-card-actions{ display:flex; align-items:flex-start; gap:6px; flex-shrink:0; }
.pf-card-title{ min-width:0; }
.pf-card-meta{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--text-2); }
.pf-card-meta b{ color:var(--text); font-weight:600; }

/* ---------- empty ---------- */
.pf-empty{ text-align:center; padding:56px 20px; color:var(--text-2); }
.pf-empty i.fi{ font-size:34px; color:var(--text-2); display:block; margin-bottom:10px; }

/* ---------- manage dialog (owner + override) — reuse .modal-* จาก app.css ---------- */
.pf-mng-field{ margin-bottom:14px; }
.pf-rag-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.pf-rag-opt{ display:inline-flex; align-items:center; gap:6px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border-control); background:var(--surface); color:var(--text-2);
  cursor:pointer; font-size:13px; font-weight:500; min-height:44px; } /* touch ≥44px (เต๋ #9) */
/* selected = ขับด้วย aria-pressed="true" (a11y source of truth · กัน recurrence S45 A6 ที่ลืม toggle aria) */
.pf-rag-opt[aria-pressed="true"]{ border-color:var(--primary-solid); color:var(--text); background:color-mix(in srgb, var(--primary-solid) 8%, transparent); }
.pf-rag-opt:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; }
.pf-rag-opt i.fi{ font-size:13px; }

/* project name = drill link (ชื่อ/row → โปรเจค · เต๋ minor) */
.pf-proj-link{ color:var(--text); text-decoration:none; }
.pf-proj-link:hover{ text-decoration:underline; }
.pf-proj-link:focus-visible{ outline:2px solid var(--primary-solid); outline-offset:2px; border-radius:4px; }

/* inline error (manage dialog validation · เต๋/เอ B1) */
.pf-err{ color:var(--alert-text); font-size:12px; margin-top:6px; display:none; }
.pf-err.show{ display:block; }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .pf-page{ padding:12px; }
  .pf-summary{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
  .pf-stat .stat-value{ font-size:28px; }
}