/* skin-monday.css — สกิน Monday ของ First Energize (พี่ปุ้ยสั่ง 30 ก.ย. 69 "ปรับ ui ทั้งหมดเป็น monday")
 * หลัก: ไม่แตะ app.js · โหลดต่อท้าย styles.css · ถอดบรรทัด <link> ออก = กลับเป็นหน้าตาเดิม (HomeOffice)
 * ยกจาก moluna-hr (clone FE 66e123a · สกินเดียวกัน ผ่าน QC contrast 24 ก.ย.) แล้วเปลี่ยนโทนเป็นฟ้า Monday มาตรฐาน
 * เปลี่ยนแบรนด์ = แก้ :root ที่เดียว (ค่าเป็นเลข rgb 3 ตัว ใช้กับ rgb(var(--x)/alpha)) */
:root{
  --ink:50 51 56; --muted:103 104 121; --faint:112 114 128;   /* faint ≥4.5 contrast บนพื้นขาว */
  --line:50 51 56; --surface:255 255 255; --card:255 255 255;
  --accent:0 96 185; --brand:0 115 234;                         /* #0060b9 · #0073ea */
  --good:0 200 117; --warn:253 171 61; --bad:226 68 92; --info:87 155 252; --gold:162 93 220;
  --side:246 247 251; --sel:204 229 255; --sel-ink:0 96 185;
  --g-purple:162 93 220; --g-teal:0 169 161; --g-orange:253 171 61; --g-red:226 68 92; --g-grey:196 196 196;
  --sh-sm:0 1px 3px rgb(50 51 56/.06);
  --sh-md:0 4px 14px rgb(50 51 56/.09);
  --sh-lg:0 12px 40px rgb(50 51 56/.18);
}
body{font-family:"Figtree","Anuphan",system-ui,sans-serif;background:#fff}
.disp,.stat .v,.brand .nm,.card>h3,.sec-h,.band,.ava,.navbadge,.tb-badge,.barwrap b{font-family:"Figtree","Anuphan",sans-serif}

/* ── topbar: พื้นขาว เส้นล่างบาง (Monday) ── */
.top{background:#fff;backdrop-filter:none;height:56px;border-bottom:1px solid rgb(var(--line)/.14);
  background-image:none}
.mark{border-radius:9px;background:rgb(var(--brand));width:34px;height:34px;font-size:17px}
.chip.skin{display:none}
.chip{border-radius:6px;border-color:rgb(var(--line)/.18)}
.icon-btn{border-radius:6px;border-color:transparent;background:transparent}
.icon-btn:hover{background:rgb(var(--line)/.06);border-color:transparent}
.tb-badge{background:rgb(var(--bad));color:#fff}

/* ── sidebar แบบ workspace ── */
@media(min-width:861px){.opshell{max-width:none;grid-template-columns:250px 1fr}.opnav{height:calc(100vh - 56px)}}
.opnav{background:rgb(var(--side));top:56px;padding:12px 10px 20px;gap:2px;border-right:1px solid rgb(var(--line)/.14)}
.opnav .grp{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;padding:14px 10px 4px}
.opnav .grp::before{content:"";width:8px;height:8px;border-radius:2px;background:rgb(var(--faint));flex:none}
.opnav .grp:nth-of-type(1)::before{background:rgb(var(--brand))}
.opnav .grp:nth-of-type(2)::before{background:rgb(var(--good))}
.opnav .grp:nth-of-type(3)::before{background:rgb(var(--g-purple))}
.opnav .grp:nth-of-type(4)::before{background:rgb(var(--info))}
.opnav .grp:nth-of-type(5)::before{background:rgb(var(--warn))}
.opnav .grp:nth-of-type(6)::before{background:rgb(var(--g-teal))}
.opnav .grp:nth-of-type(7)::before{background:rgb(var(--bad))}
.opnav-item{border-radius:6px;padding:7px 10px;min-height:36px;gap:9px}
.opnav-item b{font-weight:500;font-size:13.5px}
.opnav-item:hover{background:rgb(var(--brand)/.08)}
.opnav-item.on{background:rgb(var(--sel));box-shadow:inset 3px 0 0 rgb(var(--brand))}
.opnav-item.on b,.opnav-item.on [data-lucide]{color:rgb(var(--sel-ink))}
.opnav-item.on b{font-weight:600}
.opnav-item.on small{color:rgb(var(--sel-ink));opacity:.75}
.opnav-item .navbadge{background:rgb(var(--bad));color:#fff}
.opnav-item.on .navbadge{background:rgb(var(--bad));color:#fff}
.opmain{padding:20px 24px 60px}

/* ── หัวหน้า ── */
.ph h1{font-weight:600;font-size:22px}

/* ── ปุ่ม: หลัก = ฟ้า ── */
.btn{border-radius:8px;box-shadow:none}
.btn:hover{background:rgb(var(--line)/.05);border-color:rgb(var(--line)/.25)}
/* ปุ่มหลัก = ฟ้าเข้มโทน Monday (#0060b9) ให้ตัวขาวอ่านได้ contrast ≥4.5 */
.btn-primary{background:rgb(var(--accent));border-color:rgb(var(--accent));color:#fff;box-shadow:0 1px 2px rgb(var(--accent)/.35)}
.btn-primary:hover{background:rgb(0 78 150);border-color:rgb(0 78 150)}
.mini{border-radius:6px}
.seg{border-radius:6px}
.seg button.on{background:rgb(var(--sel));color:rgb(var(--sel-ink));font-weight:600}
input.inp,textarea.inp,select.inp{border-radius:8px}
input.inp:focus,textarea.inp:focus,select.inp:focus{box-shadow:0 0 0 3px rgb(var(--brand)/.15)}

/* ── KPI: ขอบบนสี วนฟ้า-เขียว-ส้ม-ม่วง (สีกลุ่ม Monday) ── */
.stat{border-radius:10px;border-top:3px solid rgb(var(--brand))}
.cards>.stat:nth-child(4n+2){border-top-color:rgb(var(--good))}
.cards>.stat:nth-child(4n+3){border-top-color:rgb(var(--g-orange))}
.cards>.stat:nth-child(4n+4){border-top-color:rgb(var(--g-purple))}
.stat .v{font-weight:600}
.card,.filter-bar{border-radius:10px}
.hint{background:rgb(var(--brand)/.06);border-color:rgb(var(--brand)/.2);color:rgb(var(--accent))}

/* ── ตาราง: เส้นทุกช่อง แบบบอร์ด Monday + ขอบซ้ายสีกลุ่ม ── */
table.tbl{border-radius:8px;border:1px solid rgb(var(--line)/.16);border-left:6px solid rgb(var(--brand));border-collapse:separate;border-spacing:0}
table.tbl th{background:rgb(245 246 248);text-transform:none;letter-spacing:0;font-size:12px;border-right:1px solid rgb(var(--line)/.12)}
table.tbl td{border-bottom:1px solid rgb(var(--line)/.12);border-right:1px solid rgb(var(--line)/.1);height:40px;padding:8px 10px}
table.tbl th:last-child,table.tbl td:last-child{border-right:none}
table.tbl tbody tr.click:hover,table.tbl tbody tr:hover{background:rgb(245 246 248)}
table.tbl tbody tr.sel{background:rgb(var(--sel)/.6)}
.tbl-wrap{border-radius:8px}

/* ── ป้ายสถานะ = สีเต็ม (Monday) · ความหมาย เขียว=ผ่าน เหลือง=รอ/เตือน แดง=ผิด ── */
.badge{border:none;border-radius:12px;padding:3px 10px;font-weight:500;color:#fff}
.badge.good{background:rgb(0 133 77);color:#fff}   /* สีเข้มขึ้นให้ตัวขาวอ่านได้ (contrast ≥4.5) */
.badge.warn{background:rgb(var(--warn));color:rgb(var(--ink))}
.badge.bad{background:rgb(196 44 72);color:#fff}
.badge.info{background:rgb(var(--accent));color:#fff}
.badge.gray{background:rgb(208 212 228);color:rgb(var(--ink))}
.badge.gold{background:rgb(130 70 190);color:#fff}
.band{border-radius:6px}
.band-A{background:rgb(var(--good))}.band-B{background:rgb(var(--brand))}.band-C{background:rgb(var(--warn));color:rgb(var(--ink))}.band-D{background:rgb(var(--bad))}
.bar>i{background:rgb(var(--brand))}
ul.tick li::before{background:rgb(var(--good))}

/* ── แท็บ: เส้นใต้แบบ Monday ── */
.tabs{background:transparent;padding:0;border-radius:0;gap:2px;border-bottom:1px solid rgb(var(--line)/.14);display:flex}
.tabs button{border-radius:0;border-bottom:2px solid transparent;padding:8px 12px;min-height:40px}
.tabs button.on{background:transparent;box-shadow:none;border-bottom-color:rgb(var(--brand))}

/* ── สลิป/หัวเอกสารในจอ ── */
.slip .sh{background:linear-gradient(135deg,rgb(var(--brand)),rgb(var(--accent)))}

/* ── มือถือ ── */
@media(max-width:860px){
  .opmain{padding:14px 14px 60px}
}
@media(max-width:640px){
  .stat .v{font-size:20px}
  input.inp,textarea.inp,select.inp{font-size:16px}
}


/* ── หน้าแรก (launcher) แบบ Monday: แถวแอปกะทัดรัด ไอคอนซ้าย ชื่อ+จำนวนเมนูขวา สีตามกลุ่ม ── */
.opmain:has(.app-grid){max-width:1200px;margin:0 auto;width:100%}
.app-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.app-tile{flex-direction:row;align-items:center;text-align:left;gap:14px;min-height:76px;padding:12px 14px;border-radius:10px;
  border:1px solid rgb(var(--line)/.14);box-shadow:none}
.app-tile:hover{transform:none;box-shadow:var(--sh-md);border-color:rgb(var(--brand)/.35)}
.app-ico{width:48px;height:48px;border-radius:10px;border:none;background:rgb(var(--tc,var(--brand)));color:#fff}
.app-tile .app-name{font-family:"Figtree","Anuphan",sans-serif;font-size:14.5px;-webkit-line-clamp:1}
.app-tile > .app-name{flex:1;min-width:0}
.app-grid .app-tile:nth-child(8n+1){--tc:var(--brand)} .app-grid .app-tile:nth-child(8n+2){--tc:0 200 117}
.app-grid .app-tile:nth-child(8n+3){--tc:var(--g-purple)} .app-grid .app-tile:nth-child(8n+4){--tc:var(--g-orange)}
.app-grid .app-tile:nth-child(8n+5){--tc:var(--g-teal)} .app-grid .app-tile:nth-child(8n+6){--tc:var(--g-red)}
.app-grid .app-tile:nth-child(8n+7){--tc:var(--info)} .app-grid .app-tile:nth-child(8n+8){--tc:103 104 121}
.app-tile-soon{background:#fff;border-style:dashed}
.app-tile-soon .app-ico{background:rgb(var(--g-grey)/.35);color:rgb(var(--muted))}
.launch-sec{text-transform:none;letter-spacing:0;font-size:13px;color:rgb(var(--ink))}
.opnav-home{background:#fff;border:1px solid rgb(var(--line)/.12);border-radius:6px}
@media(max-width:640px){
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-tile{flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
  .app-ico{width:32px;height:32px}.app-ico svg{width:18px;height:18px}
}