/* monday-skin.css — สกิน Monday ทับ app.css (คลาส cf-* เดิม) เฉพาะเมื่อ <html data-skin="board">
 * ไม่แตะ logic ของหน้า · ถอดคืนได้ด้วยการเอา data-skin ออก
 * สีแบรนด์ = --c-accent (theme.js ตั้งจาก PALETTES ตัวแรก = Monday ฟ้า) · ห้ามพิมพ์สีฟ้าตรง ๆ ในไฟล์นี้
 * สีสถานะ/กลุ่มเป็นชุดของ Monday: แดง=ผิด/เกินกำหนด · ส้ม=รอ/เตือน · เขียว=เสร็จ/ผ่าน · เทา=ยังไม่เริ่ม */
html[data-skin="board"] {
  --c-muted: 103 104 121;   /* #676879 */
  --c-faint: 150 153 166;   /* #9699a6 */
  --c-surface: 255 255 255;
  --c-card: 255 255 255;
  --bd-line: #d0d4e4; --bd-side: #f6f7fb; --bd-hover: #f5f6f8;
  --g-blue: #579bfc; --g-green: #00c875; --g-red: #e2445c; --g-orange: #fdab3d; --g-purple: #a25ddc; --g-grey: #c4c4c4; --g-teal: #00a9a1; --g-dgreen: #037f4c;
  --shadow-sm: none;
  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.08);
}
html[data-skin="board"] body { font-family: "Figtree", "Anuphan", system-ui, sans-serif; background: #fff; background-image: none; color: rgb(var(--c-ink)); }
html[data-skin="board"] .font-display,
html[data-skin="board"] .cf-stat-num,
html[data-skin="board"] .cf-eyebrow,
html[data-skin="board"] .cf-step-num,
html[data-skin="board"] .cf-ava,
html[data-skin="board"] .cf-cal-head { font-family: "Figtree", "Anuphan", system-ui, sans-serif; letter-spacing: 0; }
html[data-skin="board"] h1.font-display { font-weight: 600; }
html[data-skin="board"] main.max-w-6xl { max-width: 1440px; }

/* ── เส้น ── */
html[data-skin="board"] .hair { border-color: var(--bd-line); }
html[data-skin="board"] .hair-t { border-top-color: var(--bd-line); }
html[data-skin="board"] .hair-b { border-bottom-color: var(--bd-line); }
html[data-skin="board"] .hair-r { border-right-color: var(--bd-line); }
html[data-skin="board"] .hair-l { border-left-color: var(--bd-line); }
html[data-skin="board"] .cf-divide > * + * { border-top-color: var(--bd-line); }

/* ── การ์ด / KPI ── */
html[data-skin="board"] .cf-card { border-radius: 8px; border-color: var(--bd-line); box-shadow: none; }
html[data-skin="board"] a.cf-card:hover { border-color: rgb(var(--c-accent)); box-shadow: none; background: var(--bd-hover); }
html[data-skin="board"] .cf-stat { border-radius: 8px; border-color: var(--bd-line); box-shadow: none; padding: 14px 16px; border-top: 3px solid var(--kc, rgb(var(--c-accent))); }
html[data-skin="board"] .cf-stat::before { display: none; }
html[data-skin="board"] .cf-stat-safe { --kc: var(--g-green); }
html[data-skin="board"] .cf-stat-warn { --kc: var(--g-orange); }
html[data-skin="board"] .cf-stat-bad  { --kc: var(--g-red); }
html[data-skin="board"] .cf-stat-ink  { --kc: var(--g-purple); }
html[data-skin="board"] a.cf-stat:hover { transform: none; box-shadow: none; background: var(--bd-hover); }
html[data-skin="board"] .cf-stat-num { font-weight: 600; font-size: 1.6rem; }
@media (max-width: 639px) { html[data-skin="board"] .cf-stat-num { font-size: 1.3rem; } }
html[data-skin="board"] .cf-eyebrow { color: rgb(var(--c-faint)); letter-spacing: .06em; font-size: 0.7rem; }

/* ── ปุ่ม / ช่อง ── */
html[data-skin="board"] .cf-btn { border-radius: 4px; border-color: var(--bd-line); box-shadow: none; font-weight: 500; white-space: nowrap; min-height: 36px; padding: 0.45rem 0.85rem; }
html[data-skin="board"] .cf-btn:hover { background: var(--bd-hover); border-color: var(--bd-line); box-shadow: none; }
html[data-skin="board"] .cf-btn-primary { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); color: #fff; }
html[data-skin="board"] .cf-btn-primary:hover { background: rgb(var(--c-accent)); filter: brightness(0.88); border-color: rgb(var(--c-accent)); }
html[data-skin="board"] .cf-iconbox { border-radius: 6px; border-color: var(--bd-line); box-shadow: none; }
html[data-skin="board"] .cf-mark { border: 0; border-radius: 8px; background: rgb(var(--c-accent)); color: #fff; }
html[data-skin="board"] .cf-input { border-radius: 4px; border-color: var(--bd-line); }
html[data-skin="board"] .cf-input:focus { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.15); }
html[data-skin="board"] .cf-label { color: rgb(var(--c-ink)); font-weight: 500; }
html[data-skin="board"] .cf-cal { border-radius: 8px; border-color: var(--bd-line); }
html[data-skin="board"] .cf-cal-grid button { border-radius: 4px; }
html[data-skin="board"] .cf-cal-grid button.on { background: rgb(var(--c-accent)); }

/* ── ป้าย: สถานะ = สีเต็ม ตัวขาว (แบบช่องสถานะ Monday) · chip = มนขอบเส้น ── */
html[data-skin="board"] .cf-zone { border: 0; border-radius: 4px; padding: 0.2rem 0.6rem; font-weight: 500; color: #fff; white-space: nowrap; }
html[data-skin="board"] .cf-zone-danger  { background: var(--g-red); color: #fff; }
html[data-skin="board"] .cf-zone-caution { background: var(--g-orange); color: #fff; }
html[data-skin="board"] .cf-zone-safe    { background: var(--g-green); color: #fff; }
html[data-skin="board"] .cf-zone-free    { background: var(--g-blue); color: #fff; }
html[data-skin="board"] .cf-zone-mute    { background: var(--g-grey); color: #333; }
html[data-skin="board"] .cf-chip { border-color: var(--bd-line); border-radius: 12px; }
html[data-skin="board"] .cf-chip-ink { background: rgb(var(--c-accent) / 0.1); border-color: transparent; color: rgb(var(--c-accent)); }
html[data-skin="board"] .cf-ava { background: rgb(var(--c-accent)); border: 0; color: #fff; font-weight: 600; }
html[data-skin="board"] .cf-step-num { border-radius: 6px; background: rgb(var(--c-accent)); border: 0; color: #fff; }
html[data-skin="board"] .cf-bar { border-radius: 6px; background: rgb(0 0 0 / 0.07); }
html[data-skin="board"] .cf-bar > span { border-radius: 6px; }
html[data-skin="board"] .cf-bar-safe > span { background: var(--g-green); }
html[data-skin="board"] .cf-bar-warn > span { background: var(--g-orange); }
html[data-skin="board"] .cf-bar-bad > span  { background: var(--g-red); }
html[data-skin="board"] .cf-good, html[data-skin="board"] .cf-warn, html[data-skin="board"] .cf-bad, html[data-skin="board"] .cf-info { border-radius: 6px; border-width: 0 0 0 4px; }
html[data-skin="board"] .cf-good { border-left-color: var(--g-green); background: rgb(0 200 117 / 0.08); color: var(--g-dgreen); }
html[data-skin="board"] .cf-warn { border-left-color: var(--g-orange); background: rgb(253 171 61 / 0.12); color: #8a5300; }
html[data-skin="board"] .cf-bad  { border-left-color: var(--g-red); background: rgb(226 68 92 / 0.08); color: #b4223a; }
html[data-skin="board"] .cf-info { border-left-color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / 0.06); }
html[data-skin="board"] .cf-toast { border-radius: 6px; background: #323338; }
html[data-skin="board"] .cf-phone, html[data-skin="board"] .cf-screen { box-shadow: var(--shadow-md); border-color: var(--bd-line); }

/* ── ตาราง = บอร์ด: เส้นทุกช่อง สูง 38px ── */
html[data-skin="board"] .cf-table { font-size: 0.84rem; border-collapse: separate; border-spacing: 0; }
html[data-skin="board"] .cf-table th { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 500; color: rgb(var(--c-muted)); text-align: center; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--bd-line); border-right: 1px solid var(--bd-line); background: #fff; white-space: nowrap; }
html[data-skin="board"] .cf-table th:first-child, html[data-skin="board"] .cf-table th.text-left { text-align: left; }
html[data-skin="board"] .cf-table td { padding: 0.45rem 0.7rem; height: 40px; border-bottom: 1px solid var(--bd-line); border-right: 1px solid var(--bd-line); }
html[data-skin="board"] .cf-table th:last-child, html[data-skin="board"] .cf-table td:last-child { border-right: 0; }
html[data-skin="board"] .cf-table tr:last-child td { border-bottom: 0; }
html[data-skin="board"] .cf-table tbody tr:hover td { background: var(--bd-hover); }
html[data-skin="board"] .cf-table tbody tr:hover { background: none; }
/* ช่องที่มีป้ายสถานะตัวเดียว = สีเต็มช่องแบบ Monday */
html[data-skin="board"] .cf-table td:has(> .cf-zone:only-child) { padding: 3px; text-align: center; }
html[data-skin="board"] .cf-table td > .cf-zone:only-child { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 34px; border-radius: 2px; font-size: 0.78rem; }

/* ── กลุ่มบอร์ด: การ์ดที่มีตาราง = กลุ่มสี ขอบซ้าย 6px หัวกลุ่มสีเดียวกัน (theme.js ใส่ .bd-group + --gc ให้) ── */
html[data-skin="board"] .bd-group { border-left: 6px solid var(--gc, var(--g-blue)); border-radius: 8px; }
html[data-skin="board"] .bd-group h2 { color: var(--gc, var(--g-blue)); }
html[data-skin="board"] .bd-caret { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: var(--gc, var(--g-blue)); transition: transform .15s; cursor: pointer; flex: none; }
html[data-skin="board"] .bd-caret:hover { background: var(--bd-hover); }
html[data-skin="board"] .bd-group.bd-closed .bd-caret { transform: rotate(-90deg); }
html[data-skin="board"] .bd-group.bd-closed > :not(:first-child) { display: none; }

/* ── sidebar แบบ workspace ── */
html[data-skin="board"] .bd-side { background: var(--bd-side); }
html[data-skin="board"] .bd-nav { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px; min-height: 36px; color: rgb(var(--c-ink)); font-size: 0.875rem; font-weight: 500; }
html[data-skin="board"] .bd-nav:hover { background: rgb(0 0 0 / 0.05); }
html[data-skin="board"] .bd-nav svg { width: 16px; height: 16px; color: rgb(var(--c-muted)); flex: none; }
html[data-skin="board"] .bd-nav.on { background: rgb(var(--c-accent) / 0.16); color: rgb(var(--c-accent)); }
html[data-skin="board"] .bd-nav.on svg { color: rgb(var(--c-accent)); }
html[data-skin="board"] .bd-nav .tag { margin-left: auto; font-size: 10px; color: rgb(var(--c-faint)); border: 1px solid var(--bd-line); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
html[data-skin="board"] .bd-lbl { display: flex; align-items: center; gap: 6px; padding: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: rgb(var(--c-faint)); }
html[data-skin="board"] .bd-lbl i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
html[data-skin="board"] .bd-ws { display: flex; align-items: center; gap: 8px; margin: 4px 2px 6px; padding: 8px 10px; border: 1px solid var(--bd-line); border-radius: 6px; background: #fff; font-weight: 600; font-size: 13px; }
html[data-skin="board"] .bd-ws b { width: 22px; height: 22px; border-radius: 5px; background: rgb(var(--c-accent)); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }

/* หน้าแรก (ภาพรวมระบบ): แถวแอปกะทัดรัด */
html[data-skin="board"] #pagegrid > a.cf-card { align-items: center; padding: 16px 18px; }
html[data-skin="board"] #pagegrid .cf-iconbox { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgb(var(--c-accent) / 0.12); color: rgb(var(--c-accent)); }

@media (prefers-reduced-motion: no-preference) { html[data-skin="board"] main > * { animation-duration: .3s; } }