/* ==========================================================================
   เมนูร่วมของทุกแผนก (ไดอะแกรม 28.09.69 เฟส 1 · 2569-10-01) — คู่กับ assets/dept-common.js
   prefix dcm- ทั้งหมด · โทเคนจาก app.css · ตาราง/ปุ่ม/ช่องกรอก/ป๊อปอัปใช้ชุด dc-* จาก datacenter.css
   หน้าที่ใช้: hr.html · datacenter.html · content.html (เฉพาะแถบลิงก์)
   ========================================================================== */

/* ---- การ์ดกลาง (โครงเดียวกับ .db-card ของแดชบอร์ด) ---- */
.dcm-host{min-width:0}
.dcm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md,8px);box-shadow:var(--e1);padding:16px 18px 18px;margin-bottom:16px;min-width:0}
.dcm-cardhead{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dcm-cardhead>.dc-ic{font-size:30px;color:var(--navy-text);flex:none}
.dcm-cardhead>div{flex:1;min-width:0}
.dcm-cardhead b{display:block;font-size:18px;font-weight:700;color:var(--navy-text);line-height:1.2}
.dcm-cardhead small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.dcm-cardhead .dc-btn,.dcm-cardhead a.dc-btn{flex:none;text-decoration:none}
.dcm-empty{color:var(--muted);font-size:13px;text-align:center;padding:24px 8px;line-height:1.6}

/* ---- 1) แดชบอร์ดแจ้งเตือนแผนงาน: หัวหน้า 2 ตาราง · ลูกน้อง 1 ตาราง ---- */
.dcm-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.dcm-board.one{grid-template-columns:minmax(0,1fr)}
.dcm-boardcard{margin-bottom:0;padding:8px 8px 14px}
.dcm-boardcard .dc-tablefoot{padding:0 4px}
.dcm-boardtable th{background:var(--navy);color:var(--on-navy);font-size:13px;height:40px;border-right:1px solid var(--card)}
.dcm-boardtable th:last-child{border-right:0}
.dcm-boardtable .c-when{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.dcm-boardtable .c-dept{white-space:nowrap}
.dcm-boardtable .c-bdetail{text-align:center}
.dcm-boardtable .c-back,.dcm-boardtable .c-bassign{white-space:nowrap}
.dcm-boardtable tr.empty td{text-align:center;color:var(--muted);padding:26px 8px}
.dcm-bdetail{font-size:13px;line-height:1.45;color:var(--ink);text-decoration:none}
a.dcm-bdetail:hover{text-decoration:underline}
.dcm-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:104px;height:24px;padding:0 14px;border-radius:999px;border:0;
  background:var(--navy2);color:var(--on-navy);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.dcm-pill:hover{background:var(--navy-hov)}
.dcm-pill:disabled{opacity:.6;cursor:default}
.dcm-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcm-pill.ok{background:var(--ok);cursor:default}
.dcm-pill.idle{background:var(--surf3);color:var(--muted);cursor:default}
.dcm-pillsel{height:26px;min-width:120px;border-radius:999px;font-size:12px;padding:0 10px}
.dcm-del{vertical-align:middle;margin-left:4px}
.dcm-del.armed{color:var(--bad);font-weight:700}
.dcm-armed{font-size:11px;margin-left:4px}

/* ---- 2) ถ่ายรูปเข้างาน: กล่องกลาง + ป๊อปอัป ---- */
.dcm-cibox{text-align:center;padding:34px 20px 30px;display:flex;flex-direction:column;align-items:center;gap:10px}
.dcm-cibox>.dc-ic{font-size:54px;color:var(--navy-text)}
.dcm-cibox b{font-size:20px;color:var(--navy-text)}
.dcm-cibox p{max-width:520px;margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.dcm-cibox .dc-btn{margin-top:6px}
.dcm-preview{display:block;max-width:100%;max-height:220px;margin-top:8px;border-radius:6px;border:1px solid var(--line);object-fit:contain}
.dcm-gps{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 12px}
.dcm-gps.ok{color:var(--ok)}
.dcm-gps.warn{color:var(--warn)}
.dcm-fallback{margin:-6px 0 12px;line-height:1.6}
.dcm-fallback a{color:var(--accent-ink,var(--accent));font-weight:700}

/* ---- 3) ข้อมูล HR: 2 การ์ด + วงแหวน KPI (โครงเดียวกับ dashboard.css .kpi-*) ---- */
.dcm-hr{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dcm-facts{grid-template-columns:140px 1fr}
.dcm-facts dd.none{color:var(--muted);font-style:italic}
.dcm-kpi-top{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.dcm-kpi-ring{--pct:0;flex:0 0 auto;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--pct) * 1%),var(--surf3) 0);display:flex;align-items:center;justify-content:center}
.dcm-kpi-ring i{width:66px;height:66px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;font-weight:800;color:var(--navy-text)}
.dcm-kpi-grade{font-size:16px;font-weight:700;color:var(--navy-text)}
.dcm-kpi-period{font-size:12px;color:var(--muted);margin-top:2px}
.dcm-kpi-item{margin-bottom:8px}
.dcm-kpi-item .row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink);margin-bottom:3px}
.dcm-kpi-bar{height:6px;border-radius:99px;background:var(--surf3);overflow:hidden;min-width:120px}
.dcm-kpi-bar span{display:block;height:100%;background:var(--accent);border-radius:99px}
.dcm-kpi-comment{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--ink);background:var(--surf2);border-radius:4px;padding:10px 12px}
.dcm-kpi-hist{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
/* KPI โทรประเมินลูกค้า (พนักงานขาย · ไดอะแกรม 28.09.69 เฟส 2.1) — การ์ดที่ 3 กว้างเต็มแถว */
.dcm-salescall{grid-column:1 / -1}
.dcm-salestable th{white-space:nowrap}
.dcm-salestable .c-stage{text-align:center;white-space:nowrap}
.dcm-salestable .c-stage b{display:block;font-size:14px}
.dcm-salestable .c-stage small{display:block;font-size:10px;color:var(--muted)}
.dcm-salestable .c-stage.ok b{color:var(--ok)}
.dcm-salestable .c-stage.wait b{color:var(--warn)}
.dcm-salestable .c-stage.none{color:var(--muted)}

/* ---- 4) แถบลิงก์เมนูร่วม (content.html · หน้าแรกแฟ้มกลาง) ---- */
.dcm-strip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:12px 16px}
.dcm-striplink,.dcm-stripbtn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--navy-text);text-decoration:none;box-shadow:var(--e1);font:inherit;text-align:left;cursor:pointer}
.dcm-striplink:hover,.dcm-stripbtn:hover{background:var(--tint);border-color:var(--accent)}
.dcm-striplink:focus-visible,.dcm-stripbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcm-striplink>.dc-ic,.dcm-stripbtn>.dc-ic{font-size:30px;flex:none}
.dcm-striplink b,.dcm-stripbtn b{display:block;font-size:14px;font-weight:700;line-height:1.15}
.dcm-striplink small,.dcm-stripbtn small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.dcm-stripbtn.active{background:var(--accent-fade,var(--tint));border-color:var(--accent)}

/* ---- แผงเมนูร่วมในแฟ้มกลาง (datacenter.html #dcCommon): ทำงานได้ทั้งก่อนและหลังเลือกงาน ---- */
.dcm-panel{margin:0 auto;max-width:1240px;padding:4px 0 24px}
.dcm-panelhead{display:flex;align-items:center;gap:12px;margin:8px 0 18px}
.dcm-panelhead>.dc-ic{font-size:40px;color:var(--navy-text);flex:none}
.dcm-panelhead b{display:block;font-size:22px;font-weight:700;color:var(--navy-text);line-height:1.15}
.dcm-panelhead small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.dcm-panelhead>div{flex:1;min-width:0}
.dcm-navsep{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--muted);padding:10px 14px 2px;text-transform:uppercase}
body.dc-common #dcEmpty,body.dc-common #dcSections{display:none!important}
body.dc-nojob.dc-common .dc-shell{padding:16px}
body.dc-nojob #dcCommonStrip{margin-top:18px;width:min(720px,100%)}
.dc-navitem.dcm-navitem.active{background:var(--accent-fade,var(--tint))}

/* ---- ในหน้าฝ่ายบุคคล: การ์ดเรียงตามความกว้างของ .hr-main ---- */
.hr-app .dcm-host{margin-top:4px}

@media(max-width:900px){
  .dcm-board,.dcm-hr{grid-template-columns:minmax(0,1fr)}
  .dcm-facts{grid-template-columns:110px 1fr}
}
@media(max-width:640px){
  .dcm-strip{padding:10px 12px;gap:8px}
  .dcm-striplink,.dcm-stripbtn{flex:1 1 calc(50% - 8px);min-height:48px;padding:6px 12px}
  .dcm-striplink>.dc-ic,.dcm-stripbtn>.dc-ic{font-size:24px}
  .dcm-boardcard{padding:6px 4px 12px}
  .dcm-cibox{padding:26px 14px 24px}
  /* ตารางแจ้งเตือนบนมือถือ = รายการการ์ด ไม่ต้องเลื่อนข้าง (แบบเดียวกับหน้าฝ่ายออกแบบ body.db-rsp · ผลตรวจ 2569-10-14)
     แถวบน: เวลา + การตอบรับ · แถวกลาง: รายละเอียด · แถวล่าง: ฝ่ายผู้แจ้ง → ฝ่ายที่รับแจ้ง / ผู้รับมอบหมาย · ข้อความว่างกลางการ์ด */
  .dc-table.dcm-boardtable{display:block;width:100%;min-width:0}
  .dc-table.dcm-boardtable thead{display:none}
  .dc-table.dcm-boardtable tbody{display:flex;flex-direction:column;gap:8px}
  .dc-table.dcm-boardtable tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .dc-table.dcm-boardtable tbody tr::after{content:"";order:5;flex-basis:100%;height:0}
  .dc-table.dcm-boardtable td{display:block;width:auto;height:auto;padding:0;border:0;background:transparent;text-align:left;white-space:normal}
  .dc-table.dcm-boardtable td.c-when{order:1;font-size:12px;font-weight:700;color:var(--navy-text)}
  .dc-table.dcm-boardtable td.c-back{order:2;margin-left:auto}
  .dc-table.dcm-boardtable td.c-bdetail{order:10;flex-basis:100%}
  .dc-table.dcm-boardtable td.c-bdetail :is(a,button){font-size:14px;text-align:left}
  .dc-table.dcm-boardtable td.c-dept{order:20;font-size:12px;color:var(--muted)}
  .dc-table.dcm-boardtable td.c-dept+td.c-dept{order:21}
  .dc-table.dcm-boardtable td.c-dept+td.c-dept::before{content:"→";margin-right:8px}
  .dc-table.dcm-boardtable td.c-bassign{order:20;flex-basis:100%}
  .dc-table.dcm-boardtable td.c-bassign select{max-width:100%}
  .dc-table.dcm-boardtable tr.empty{justify-content:center;padding:22px 14px}
  .dc-table.dcm-boardtable tr.empty td{flex-basis:100%;text-align:center;color:var(--muted)}
}