/* dashboard.css — แดชบอร์ดความคืบหน้าการเชื่อมโยงมาตรฐานอาชีพ */

/* ---- ส่วนหัว: ความคืบหน้าของแต่ละสาขาวิชา ---- */
.dash-heads { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-head { text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm); font: inherit; color: var(--text); }
.dash-head:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dash-head.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100), var(--shadow-md); }
.dh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dh-name { font-weight: 700; font-size: .98rem; }
.dh-code { font-size: .78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dh-num { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 6px; }
.dh-num b { font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1; }
.dh-num small { color: var(--text-secondary); font-size: .82rem; }
.dh-pct { margin-left: auto; font-weight: 800; color: #16a34a; font-size: 1rem; }
.dh-bar { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.dh-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .35s ease; }
.dh-sub { display: flex; gap: 10px; margin-top: 8px; font-size: .76rem; color: var(--text-secondary); flex-wrap: wrap; }
.dh-sub .ok { color: #166534; font-weight: 600; }
.dh-sub .warn { color: #b45309; font-weight: 600; }
.dh-sub .mute { color: #64748b; }

/* ---- แท็บสาขาวิชา ---- */
.dash-tabs { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-tab { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.dash-tab:hover { border-color: var(--primary-light); color: var(--primary); }
.dash-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.3); }
.dash-tab small { opacity: .8; font-weight: 500; font-size: .8rem; }
.dash-tab .material-symbols-rounded { font-size: 19px; }

/* ---- แผงตาราง ---- */
.dash-panel { position: relative; z-index: 1; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 16px 18px 20px; margin-bottom: 24px; }
.dash-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.dash-search { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.dash-search .material-symbols-rounded { position: absolute; left: 12px; color: var(--text-secondary); font-size: 20px; }
.dash-search input { width: 100%; padding: 10px 12px 10px 40px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.dash-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.dash-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-chip { background: #f1f5f9; border: 1.5px solid transparent; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .84rem;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.dash-chip b { font-weight: 800; color: var(--text); }
.dash-chip:hover { background: var(--primary-50); color: var(--primary); }
.dash-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.dash-chip.active b { color: #fff; }
.dash-count { margin-left: auto; font-size: .85rem; color: var(--text-secondary); }

.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.dash-table thead th { text-align: left; font-size: .82rem; color: var(--text-secondary); font-weight: 700; padding: 0 14px 4px; }
.dash-table thead th.c-confirm { text-align: center; width: 190px; }
.dash-table tbody tr { background: #fff; }
.dash-table tbody td { border-top: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); padding: 10px 14px; vertical-align: middle; }
.dash-table tbody td.c-course { border-left: 1.5px solid var(--border); border-radius: 10px 0 0 10px; border-left-width: 5px; border-left-color: #cbd5e1; }
.dash-table tbody td.c-confirm { border-right: 1.5px solid var(--border); border-radius: 0 10px 10px 0; text-align: center; white-space: nowrap; }
.dash-table tbody tr.is-done td.c-course { border-left-color: #22c55e; background: #f6fefa; }
.dash-table tbody tr.is-done td.c-confirm { background: #f6fefa; }

.dc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-code { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; text-decoration: none; }
.dc-code:hover { text-decoration: underline; }
.dc-name { font-weight: 600; }
.dc-meta { font-size: .8rem; color: var(--text-secondary); margin-top: 3px; }
.dc-badge { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dc-badge.ok { background: #dcfce7; color: #166534; }
.dc-badge.warn { background: #fef3c7; color: #92400e; }
.dc-badge.mute { background: #f1f5f9; color: #475569; }
.dc-badge.none { background: #fee2e2; color: #991b1b; }
.dc-badge.ref { background: var(--primary-50); color: var(--primary); }

.dash-confirm { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 700; font-size: .88rem; color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.dash-confirm:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.dash-confirm .material-symbols-rounded { font-size: 20px; }
.dash-confirm.on { background: linear-gradient(135deg, #16a34a, #22c55e); border-color: #16a34a; color: #fff; box-shadow: 0 3px 10px rgba(22,163,74,.3); }
.dash-confirm:disabled { opacity: .6; cursor: default; }
.dc-at { display: block; font-size: .72rem; color: var(--text-secondary); margin-top: 3px; }
.dash-loading { text-align: center; color: var(--text-secondary); padding: 30px; }

@media (max-width: 980px) { .dash-heads { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .dash-heads { grid-template-columns: 1fr; }
  .dash-table thead th.c-confirm { width: 120px; }
  .dash-confirm .dc-label { display: none; }
}

/* ===== v2: การยืนยัน (เขียว/ส้ม) · ปุ่ม Word · แบ่งหน้า · เรียงลำดับ ===== */
.dh-sub .upd { color: #c2410c; font-weight: 600; }
.dash-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-secondary); margin-left: auto; }
.dash-sort select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); }
.dash-sort select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.dash-table thead th.c-confirm { width: 230px; }
.dash-table thead th.c-word { width: 170px; text-align: center; }
.th-sort { font: inherit; font-weight: 700; color: var(--text-secondary); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; padding: 0; }
.th-sort:hover { color: var(--primary); }
.th-sort .material-symbols-rounded { font-size: 18px; }
.dash-table tbody td.c-confirm { border-right: none; border-radius: 0; }
.dash-table tbody td.c-word { border-right: 1.5px solid var(--border); border-radius: 0 10px 10px 0; text-align: center; white-space: nowrap; }
.dash-table tbody tr.st-confirmed td { background: #f6fefa; }
.dash-table tbody tr.st-confirmed td.c-course { border-left-color: #22c55e; }
.dash-table tbody tr.st-updated td { background: #fff7ed; }
.dash-table tbody tr.st-updated td.c-course { border-left-color: #f97316; }
.dash-confirm { text-decoration: none; }
.dash-confirm.todo { color: var(--text-secondary); }
.dash-confirm.todo:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.dash-confirm.on:hover { background: linear-gradient(135deg, #15803d, #16a34a); }
.dash-confirm.upd { background: linear-gradient(135deg, #ea580c, #f97316); border-color: #ea580c; color: #fff; box-shadow: 0 3px 10px rgba(249,115,22,.35); animation: dash-pulse 2s ease-in-out infinite; }
.dash-confirm.upd:hover { background: linear-gradient(135deg, #c2410c, #ea580c); color: #fff; }
@keyframes dash-pulse { 0%, 100% { box-shadow: 0 3px 10px rgba(249,115,22,.35); } 50% { box-shadow: 0 3px 16px rgba(249,115,22,.6); } }
.dash-word { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; text-decoration: none; border-radius: 999px;
  padding: 7px 14px; font-weight: 700; font-size: .86rem; box-shadow: 0 3px 10px rgba(59,130,246,.3); transition: var(--transition); }
.dash-word:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(59,130,246,.45); color: #fff; }
.dash-word .material-symbols-rounded { font-size: 18px; }
.dash-word small { opacity: .85; font-weight: 600; }
.dc-nofile { color: #cbd5e1; font-weight: 700; }
.dash-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pg-info { font-size: .85rem; color: var(--text-secondary); }
.pg-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg-btn { display: inline-flex; align-items: center; gap: 2px; min-width: 36px; height: 36px; padding: 0 10px; justify-content: center; background: #fff; border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-weight: 600; font-size: .85rem; color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn:disabled { opacity: .45; cursor: default; }
.pg-btn .material-symbols-rounded { font-size: 18px; }
.pg-gap { padding: 0 4px; color: var(--text-secondary); }
@media (max-width: 620px) {
  .dash-table thead th.c-confirm { width: 150px; }
  .dash-table thead th.c-word { width: 110px; }
  .dash-confirm .dc-label { display: none; }
  .dash-sort { margin-left: 0; }
}

/* ===== แอดมิน: แถบสถานะ + กล่องเข้าสู่ระบบ · ปุ่มสถานะเป็นแบบดูอย่างเดียวเมื่อยังไม่เข้าสู่ระบบ ===== */
.dash-admin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1.5px solid var(--border); font-size: .88rem; color: var(--text-secondary); }
.dash-admin.on { background: #f0fdf4; border-color: #86efac; color: #166534; }
.dash-admin .material-symbols-rounded { font-size: 20px; }
.dash-admin b { color: inherit; }
.dash-admin .da-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 700; font-size: .85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--primary); background: var(--primary); color: #fff; transition: var(--transition); }
.dash-admin .da-btn:hover { background: var(--primary-dark, #1e40af); }
.dash-admin.on .da-btn { background: #fff; color: #166534; border-color: #86efac; }
.dash-admin.on .da-btn:hover { background: #dcfce7; }
.dash-admin .da-btn .material-symbols-rounded { font-size: 18px; }
.dash-confirm.view { cursor: pointer; }
.dash-confirm.view.on:hover, .dash-confirm.view.upd:hover { filter: brightness(1.05); }
.dash-confirm .dc-lock { font-size: 15px; opacity: .8; }
.dash-modal { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dash-modal[hidden] { display: none; }   /* display:flex ชนะ [hidden] ของเบราว์เซอร์ ต้องปิดเอง */
.dash-login { background: #fff; border-radius: 16px; padding: 22px 24px; width: min(420px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dl-head .material-symbols-rounded { font-size: 28px; color: var(--primary); }
.dl-head h3 { margin: 0; font-size: 1.1rem; }
.dash-login p { margin: 0 0 12px; font-size: .86rem; color: var(--text-secondary); line-height: 1.5; }
.dash-login label { display: block; font-weight: 600; font-size: .88rem; }
.dash-login input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 1.05rem; letter-spacing: .15em; border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.dash-login input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.dl-err { margin-top: 8px; font-size: .85rem; color: #b91c1c; font-weight: 600; }
.dl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dl-actions .btn-word, .dl-actions .btn-tool { display: inline-flex; align-items: center; gap: 6px; }
.dl-cancel { background: #fff; color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.dash-confirm.todo.view { cursor: pointer; }
.dash-confirm.todo:not(.view):hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.dash-confirm.view, .dash-confirm.todo.view { cursor: default; }
.dash-confirm.view:hover { transform: none; }
.dash-confirm.todo.view:hover { border-color: var(--border); color: var(--text-secondary); background: #fff; }
.dc-meta b.ok { color: #166534; } .dc-meta b.warn { color: #b45309; }
.dh-sub .multi { color: #6d28d9; font-weight: 600; }
.dash-export { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; text-decoration: none; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .85rem; box-shadow: 0 3px 10px rgba(22,163,74,.3); transition: var(--transition); white-space: nowrap; }
.dash-export:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 5px 14px rgba(22,163,74,.4); }
.dash-export .material-symbols-rounded { font-size: 18px; }
.dash-chip.f-multi.active { background: #6d28d9; border-color: #6d28d9; }

/* ===== การยืนยันแยกตามมาตรฐาน (1 บรรทัดต่อมาตรฐาน) ===== */
.dash-table thead th.c-confirm { width: 380px; }
.dash-table thead th.c-word { width: 190px; }
.dash-table tbody td.c-confirm { text-align: left; white-space: normal; }
.dc-stds { display: grid; gap: 6px; }
.dc-std { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1.5px solid #dcfce7; }
.dc-std.upd { border-color: #fed7aa; background: #fff7ed; }
.dc-std .dash-confirm { padding: 6px 12px; font-size: .82rem; flex: none; }
.dc-std-t { min-width: 0; font-size: .85rem; line-height: 1.35; }
.dc-std-t b { font-weight: 700; }
.dc-std-t small { color: var(--text-secondary); }
.dc-std-m { font-size: .78rem; color: var(--text-secondary); }
.dc-std-m b.ok { color: #166534; } .dc-std-m b.warn { color: #b45309; }
.dc-badge.multi { background: #ede9fe; color: #5b21b6; }
.dc-words { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dash-word.sm { padding: 5px 11px; font-size: .8rem; }
.dash-word.all { background: linear-gradient(135deg, #5b21b6, #8b5cf6); box-shadow: 0 3px 10px rgba(139,92,246,.3); }
@media (max-width: 760px) { .dash-table thead th.c-confirm { width: 220px; } .dc-std { flex-wrap: wrap; } }
.dash-drive { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.dash-drive .warn { color: #b45309; }
.dash-drive .da-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .84rem; color: #5b21b6; text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1.5px solid #c4b5fd; background: #fff; }
.dash-drive .da-link:hover { background: #ede9fe; }
.dash-drive .da-link .material-symbols-rounded { font-size: 17px; }
.dash-drive .da-btn { background: #6d28d9; border-color: #6d28d9; }
.dc-hist { margin-left: 6px; font: inherit; font-size: .74rem; font-weight: 700; color: #5b21b6; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 999px; padding: 1px 9px; cursor: pointer; }
.dc-hist:hover { background: #ede9fe; }
.dc-versions { margin-top: 6px; }
.dv-list { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: #faf5ff; border: 1px dashed #c4b5fd; font-size: .8rem; }
.dv-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-item.latest b { color: #166534; }
.dv-item em { font-style: normal; font-size: .7rem; padding: 0 6px; border-radius: 999px; background: #dcfce7; color: #166534; }
.dv-dl, .dv-rb { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: .76rem; font-weight: 700; text-decoration: none; padding: 3px 9px; border-radius: 999px; border: 1px solid #c4b5fd; background: #fff; color: #5b21b6; cursor: pointer; }
.dv-dl:hover, .dv-rb:hover { background: #ede9fe; }
.dv-dl .material-symbols-rounded, .dv-rb .material-symbols-rounded { font-size: 15px; }
.dv-rb { border-color: #fdba74; color: #c2410c; }
.dv-rb:hover { background: #fff7ed; }
.dc-std-m b.dc-by { color: #1d4ed8; font-weight: 700; }

/* ---------- ปุ่ม PDF (สร้างฝั่งเบราว์เซอร์จากผลยืนยัน ด้วย sheet.js) ---------- */
button.dash-word { border: 0; cursor: pointer; font-family: inherit; }
button.dash-word:disabled { opacity: .65; cursor: progress; transform: none; }
.dash-word.pdf { background: linear-gradient(135deg, #b91c1c, #ef4444); box-shadow: 0 3px 10px rgba(239,68,68,.3); }
.dash-word.pdf:hover { box-shadow: 0 5px 14px rgba(239,68,68,.45); }
.dash-word.pdf.all { background: linear-gradient(135deg, #9f1239, #f43f5e); box-shadow: 0 3px 10px rgba(244,63,94,.3); }
button.dv-dl { background: none; border: 0; cursor: pointer; font: inherit; }
.dv-dl.pdf { color: #b91c1c; }
.dv-dl.pdf .material-symbols-rounded { color: #b91c1c; }
button.dv-dl:disabled { opacity: .6; cursor: progress; }
/* พื้นที่วาดแบบฟอร์มสำหรับสร้าง PDF: วางนอกจอ (ห้าม display:none / opacity:0 — html2canvas จะได้ภาพว่าง) */
.link-sheet-stage { position: absolute; left: -4000px; top: 0; width: 1123px; pointer-events: none; }
.dc-files { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------- ปุ่ม Word + PDF อยู่แถวเดียวกันเป็นปุ่มคู่ (เจ้าของสั่ง 2026-09-08 17:45) ---------- */
.dash-table thead th.c-word { width: 210px; }
.dc-files { display: inline-flex; align-items: stretch; gap: 0; flex-wrap: nowrap; border-radius: 999px; overflow: hidden; box-shadow: 0 3px 10px rgba(30,64,175,.25); }
.dc-files .dash-word { border-radius: 0; box-shadow: none; padding: 5px 11px; font-size: .8rem; }
.dc-files .dash-word:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.dc-files .dash-word + .dash-word { border-left: 1px solid rgba(255,255,255,.45); }
.dc-files .dash-word.pdf { padding: 5px 10px; }
.dc-files .dash-word.all { padding: 5px 10px; }
.dc-words { gap: 5px; }
@media (max-width: 720px) { .dash-table thead th.c-word { width: 150px; } .dc-files .dash-word { padding: 5px 8px; font-size: .74rem; } .dc-files .dash-word small { display: none; } }

/* ---------- ปุ่มไฟล์อยู่ในการ์ดของแต่ละมาตรฐาน (ตรงแถวกับอาชีพเสมอ) — เจ้าของสั่ง 2026-09-08 18:10 ---------- */
.dash-table thead th.c-confirm { width: 560px; }
.dash-table tbody td.c-confirm { border-right: 1.5px solid var(--border); border-radius: 0 10px 10px 0; }
.dash-table tbody tr.is-done td.c-confirm { background: #f6fefa; }
.dc-std { flex-wrap: wrap; }
.dc-std-t { flex: 1 1 220px; }
.dc-std-files { margin-left: auto; flex: none; display: flex; align-items: center; }
.dc-all { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 2px 4px 0; }
.dc-all small { color: var(--text-secondary); font-size: .76rem; }
.dc-words { align-items: flex-end; }
@media (max-width: 900px) { .dash-table thead th.c-confirm { width: auto; } .dc-std-files { margin-left: 0; width: 100%; } }

/* ---------- สถานะ "ไม่มีมาตรฐานอาชีพรองรับ" (เทา-น้ำเงิน) — เจ้าของสั่ง 2026-09-08 ---------- */
.dash-confirm.nostd { background: linear-gradient(135deg, #475569, #64748b); color: #fff; border-color: #475569; }
.dash-confirm.nostd.view { opacity: .95; }
.dc-std.nostd { border-color: #cbd5e1; background: #f8fafc; }
.dc-std-m b.nostd { color: #334155; }
.dash-chip.f-nostd.active { background: #475569; color: #fff; }
.dh-sub .nostd { color: #334155; }
.dash-export.nostd { background: linear-gradient(135deg, #475569, #64748b); box-shadow: 0 3px 10px rgba(71,85,105,.3); }

/* ---------- แอดมินเอารายวิชาออกจากรายการวิเคราะห์ (ไม่ลบข้อมูล) — เจ้าของสั่ง 2026-09-09 ---------- */
.dc-remove { border: 0; background: none; cursor: pointer; color: #cbd5e1; padding: 2px; border-radius: 8px; line-height: 0; transition: var(--transition); }
.dc-remove:hover { color: #dc2626; background: #fee2e2; }
.dc-remove .material-symbols-rounded { font-size: 18px; }
.dc-remove:disabled { opacity: .5; cursor: progress; }
tr.st-excluded td { background: #f8fafc; }
tr.st-excluded .dc-code.off { color: #64748b; text-decoration: line-through; }
.dash-confirm.exc { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.dc-exc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dc-exc small { color: var(--text-secondary); font-size: .78rem; }
.dash-chip.f-excluded.active { background: #475569; color: #fff; }

/* ---------- เพิ่มรายวิชาเข้ารายการวิเคราะห์ (แอดมิน) — เจ้าของสั่ง 2026-09-09 ข้อ 2 ---------- */
.dc-badge.add { background: #ede9fe; color: #5b21b6; }
.dc-badge.add.done { background: #dcfce7; color: #166534; }
.dash-login.add-box { max-width: 640px; width: 92vw; }
.add-results { max-height: 46vh; overflow-y: auto; display: grid; gap: 6px; margin: 8px 0 4px; }
.add-results > small { color: var(--text-secondary); }
.add-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; }
.add-item small { display: block; color: var(--text-secondary); font-size: .8rem; }
.add-item .btn-word { padding: 5px 12px; font-size: .84rem; }
.add-have { color: #16a34a; font-weight: 700; font-size: .84rem; white-space: nowrap; }

/* ---------- แถบสรุปผลการเทียบ: ผ่าน / ไม่ผ่าน / ไม่มีมาตรฐาน / ยังไม่ยืนยัน (เจ้าของสั่ง 2026-09-09) ---------- */
.dash-results { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: linear-gradient(135deg, #f8fafc, #fff); }
.dash-results[hidden] { display: none; }
.dr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dr-head b { font-size: 1rem; }
.dr-head small { color: var(--text-secondary); }
.dr-head .material-symbols-rounded { color: var(--primary); }
.dr-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dr-chip { display: flex; align-items: baseline; gap: 7px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition); text-align: left; }
.dr-chip b { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.dr-chip small { margin-left: auto; font-size: .78rem; opacity: .8; }
.dr-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dr-chip.pass { border-color: #bbf7d0; } .dr-chip.pass b { color: #16a34a; }
.dr-chip.fail { border-color: #fecaca; } .dr-chip.fail b { color: #dc2626; }
.dr-chip.nostd { border-color: #cbd5e1; } .dr-chip.nostd b { color: #475569; }
.dr-chip.todo b { color: #94a3b8; }
.dr-chip.pass.active { background: #16a34a; color: #fff; border-color: #16a34a; } .dr-chip.pass.active b { color: #fff; }
.dr-chip.fail.active { background: #dc2626; color: #fff; border-color: #dc2626; } .dr-chip.fail.active b { color: #fff; }
.dr-chip.nostd.active { background: #475569; color: #fff; border-color: #475569; } .dr-chip.nostd.active b { color: #fff; }
.dr-chip.todo.active { background: #64748b; color: #fff; border-color: #64748b; } .dr-chip.todo.active b { color: #fff; }
.dr-all { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: .86rem; color: var(--text-secondary); }
.dr-all b.ok { color: #16a34a; } .dr-all b.warn { color: #dc2626; } .dr-all b.mute { color: #475569; }
.dash-chip.f-pass.active { background: #16a34a; color: #fff; }
.dash-chip.f-fail.active { background: #dc2626; color: #fff; }

/* ---------- มุมมองความตรงกัน UoC ↔ สมรรถนะรายวิชา (เจ้าของสั่ง 2026-09-09) ---------- */
.dash-views { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.dash-view { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--text-secondary); font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: var(--transition); }
.dash-view:hover { border-color: var(--primary-light); color: var(--primary); }
.dash-view.active { background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,.35); }
.dash-view .material-symbols-rounded { font-size: 19px; }
.dash-cov .dr-head .dash-export { margin-left: auto; }
.dash-export.cov { background: linear-gradient(135deg, #0f766e, #14b8a6); box-shadow: 0 3px 10px rgba(20,184,166,.3); }
.dr-chip.warn { border-color: #fde68a; } .dr-chip.warn b { color: #b45309; }
.dr-chip.warn.active { background: #b45309; color: #fff; border-color: #b45309; } .dr-chip.warn.active b { color: #fff; }
.dr-all select { margin-left: 6px; padding: 4px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: .84rem; }
.cv-wrap { display: grid; gap: 6px; text-align: left; }
.cv-bar { position: relative; background: #f1f5f9; border-radius: 999px; height: 24px; overflow: hidden; display: flex; align-items: center; }
.cv-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #fca5a5; }
.cv-bar i.ok { background: #86efac; }
.cv-bar span { position: relative; padding: 0 10px; font-size: .8rem; font-weight: 600; color: #0f172a; }
.cv-ok { color: #166534; font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; gap: 4px; }
.cv-ok .material-symbols-rounded { font-size: 17px; }
.cv-empty { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cv-tag { background: #fee2e2; color: #b91c1c; font-weight: 700; font-size: .78rem; padding: 2px 9px; border-radius: 999px; }
.cv-uoc { background: #fff; border: 1px solid var(--border); color: var(--text-secondary); font-size: .76rem; padding: 1px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; cursor: help; }
.cv-uoc.more { font-weight: 700; color: #b91c1c; border-color: #fecaca; }
.cv-rows { font-size: .8rem; color: #92400e; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cv-rows .material-symbols-rounded { font-size: 16px; }
.cv-rows b { cursor: help; }
.cv-note { font-size: .8rem; color: var(--text-secondary); margin-top: 4px; }

/* ---------- คลิกรายวิชาในมุมมองความตรงกัน → ตารางจับคู่ (เจ้าของสั่ง 2026-09-09) ---------- */
.cv-open { display: inline-flex; align-items: center; gap: 3px; border: 1.5px solid var(--border); background: #fff; color: var(--primary); border-radius: 999px; padding: 2px 10px; font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
.cv-open:hover { background: var(--primary-50, #eff6ff); border-color: var(--primary-light); }
.cv-open .material-symbols-rounded { font-size: 15px; }
#covModal tr[data-code], .dash-table tbody tr[data-code] { cursor: default; }
#rows tr[data-code]:hover .cv-open { background: #eff6ff; }
.cov-box { background: #fff; border-radius: 16px; width: min(1240px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.cov-head { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 1.5px solid var(--border); background: linear-gradient(135deg, #eff6ff, #fff); }
.cov-head h3 { margin: 0; font-size: 1.1rem; }
.cov-sub { color: var(--text-secondary); font-size: .86rem; margin-top: 3px; }
.cov-sub b.ok { color: #16a34a; } .cov-sub b.warn { color: #dc2626; }
.cov-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cov-acts .btn-tool { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--text); text-decoration: none; font-size: .84rem; font-weight: 700; }
.dash-modal-x { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; cursor: pointer; color: var(--text-secondary); line-height: 0; }
.dash-modal-x:hover { background: #fee2e2; color: #b91c1c; }
.cov-body { padding: 12px 18px 18px; overflow: auto; }
.cov-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--text-secondary); margin-bottom: 8px; }
.cov-legend .lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.cov-legend .lg.ok { background: #bbf7d0; } .cov-legend .lg.col { background: #fee2e2; } .cov-legend .lg.row { background: #fef3c7; }
.cov-matrix-wrap { overflow: auto; max-height: 66vh; border: 1.5px solid var(--border); border-radius: 10px; }
.cov-matrix { border-collapse: separate; border-spacing: 0; font-size: .84rem; width: max-content; min-width: 100%; }
.cov-matrix th, .cov-matrix td { border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 6px 8px; text-align: center; vertical-align: middle; background: #fff; }
.cov-matrix thead th { position: sticky; top: 0; z-index: 3; background: #f1f5f9; font-weight: 700; white-space: nowrap; cursor: help; }
.cov-matrix thead th.bad { background: #fee2e2; color: #b91c1c; }
.cov-matrix .cm-first { position: sticky; left: 0; z-index: 2; text-align: left; min-width: 260px; max-width: 420px; background: #fff; box-shadow: 1px 0 0 #e2e8f0; }
.cov-matrix thead .cm-first { z-index: 4; background: #f1f5f9; }
.cov-matrix tbody tr.norow .cm-first { background: #fef3c7; }
.cov-matrix td.on { background: #dcfce7; color: #15803d; }
.cov-matrix td.on .material-symbols-rounded { font-size: 19px; font-weight: 700; }
.cov-matrix td.bad { background: #fff1f2; }
.cov-matrix td.on.bad { background: #dcfce7; }
.cov-matrix tfoot .cm-name { font-size: .74rem; color: var(--text-secondary); max-width: 120px; white-space: normal; line-height: 1.25; vertical-align: top; }
.cov-matrix tfoot .cm-name.bad { color: #b91c1c; background: #fff1f2; }
.cov-none p { margin: 6px 0; }
.cov-rowlist { margin: 6px 0 0 1.2em; color: var(--text-secondary); font-size: .9rem; }

/* ---------- รอบการดำเนินงาน "ครั้งที่ …" (เจ้าของสั่ง 2026-09-10) — ชื่อเดียวกับโฟลเดอร์บน Google Drive ---------- */
.dash-round { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1.5px solid #c7d2fe; color: #312e81; }
.dash-round[hidden] { display: none; }
.dash-round > .material-symbols-rounded { font-size: 24px; color: #4338ca; flex: none; margin-top: 1px; }
.dash-round .dr-main { flex: 1 1 auto; min-width: 0; }
.dash-round .dr-title { font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-round .dr-title b { font-size: 1.06rem; color: #1e1b4b; }
.dash-round .dr-count { font-size: .78rem; font-weight: 700; color: #4338ca; background: #e0e7ff; border-radius: 999px; padding: 2px 10px; }
.dash-round small { display: block; margin-top: 3px; font-size: .8rem; color: #4c1d95; line-height: 1.55; }
.dash-round .dr-others { margin-top: 6px; font-size: .78rem; color: #4c1d95; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-round .dr-chip { background: #fff; border: 1px solid #ddd6fe; border-radius: 999px; padding: 2px 10px; }
.dash-round .dr-acts { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-round .da-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 700; font-size: .82rem; padding: 7px 13px;
  border-radius: 999px; cursor: pointer; border: 1.5px solid #4338ca; background: #fff; color: #3730a3; transition: var(--transition); }
.dash-round .da-btn:hover { background: #e0e7ff; }
.dash-round .da-btn .material-symbols-rounded { font-size: 18px; }
.dash-round .da-sel { font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1.5px solid #c7d2fe; background: #fff; color: #3730a3; }
.dash-drive .da-note { font-size: .82rem; color: var(--text-secondary); }
.dash-drive .da-note b { color: #4338ca; }
.dc-round { font-weight: 700; color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 0 8px; font-size: .74rem; }
@media (max-width: 720px) {
  .dash-round { flex-wrap: wrap; }
  .dash-round .dr-acts { width: 100%; }
}

/* ---------- ผู้ทำงานรายสาขา ---------- */
.dash-round .dr-workers { margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; }
.dash-round .dr-workers > .material-symbols-rounded { font-size: 18px; color: #4338ca; }
.dash-round .dr-wk { font: inherit; font-size: .78rem; cursor: pointer; background: #fff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 999px; padding: 3px 10px; }
.dash-round .dr-wk:hover { background: #e0e7ff; }
.dash-round .dr-wk b { color: #1e1b4b; }
.dash-round .dr-wk.none { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.dash-round .dr-warn { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 2px 10px; }
.dash-round .dr-ok { color: #166534; background: #dcfce7; border: 1px solid #86efac; border-radius: 999px; padding: 2px 10px; }
.worker-box { background: #fff; border-radius: 16px; width: min(880px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.wk-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1.5px solid var(--border); }
.wk-head > .material-symbols-rounded { font-size: 28px; color: #4338ca; }
.wk-head h3 { margin: 0; font-size: 1.08rem; }
.wk-head small { color: var(--text-secondary); font-size: .8rem; }
.wk-close { margin-left: auto; border: none; background: #f1f5f9; border-radius: 999px; width: 34px; height: 34px; cursor: pointer; color: #475569; }
.wk-close:hover { background: #e2e8f0; }
.wk-body { overflow-y: auto; padding: 14px 20px 20px; min-height: 0; display: grid; gap: 12px; }
.wk-dept { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.wk-dept.focus { border-color: #818cf8; background: #f8faff; }
.wk-dt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95rem; }
.wk-dt small { color: var(--text-secondary); font-weight: 500; }
.wk-badge { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: auto; }
.wk-badge.on { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.wk-badge.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.wk-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 999px; padding: 3px 10px; }
.wk-chip.on { background: #f0fdf4; border-color: #86efac; color: #166534; }
.wk-chip .material-symbols-rounded { font-size: 16px; }
.wk-chip em { font-style: normal; opacity: .75; font-size: .76rem; }
.wk-x { border: none; background: transparent; cursor: pointer; color: inherit; opacity: .6; font-size: .8rem; padding: 0 2px; }
.wk-x:hover { opacity: 1; color: #b91c1c; }
.wk-none, .wk-hint { color: var(--text-secondary); font-size: .82rem; }
.wk-add { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wk-q { flex: 1 1 260px; font: inherit; font-size: .86rem; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 999px; }
.wk-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .82rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1.5px solid #4338ca; background: #4338ca; color: #fff; }
.wk-btn:hover { background: #3730a3; }
.wk-btn.ghost { background: #fff; color: #3730a3; }
.wk-btn.ghost:hover { background: #e0e7ff; }
.wk-btn .material-symbols-rounded { font-size: 18px; }
.wk-res { flex: 1 1 100%; }
.wk-rows { display: grid; gap: 4px; margin: 6px 0; }
.wk-row { display: flex; align-items: center; gap: 7px; text-align: left; font: inherit; font-size: .85rem; padding: 7px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: #f8fafc; }
.wk-row:hover { background: #e0e7ff; border-color: #a5b4fc; }
.wk-row .material-symbols-rounded { font-size: 18px; color: #4338ca; }
.wk-row em { font-style: normal; color: var(--text-secondary); font-size: .78rem; }
.wk-row small { margin-left: auto; color: var(--text-secondary); }
.dash-round .dr-live { font-size: .72rem; font-weight: 700; color: #166534; background: #dcfce7; border: 1px solid #86efac; border-radius: 999px; padding: 1px 9px; }
.dash-round .dr-past { font-size: .72rem; font-weight: 700; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 1px 9px; }
.dash-round .dr-chip { font: inherit; font-size: .78rem; cursor: pointer; }
.dash-round .dr-chip:hover { background: #e0e7ff; border-color: #a5b4fc; }
.dash-round .dr-chip.back { background: #eef2ff; font-weight: 700; }
.wk-manage { border: 1.5px dashed #c7d2fe; border-radius: 12px; padding: 12px 14px; background: #f8faff; }
.wk-manage .wk-dt small { font-weight: 500; }
.wk-dq { flex: 1 1 260px; font: inherit; font-size: .86rem; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 999px; }
.wk-row[disabled] { opacity: .55; cursor: default; }
.wk-dt .wk-x { margin-left: 6px; }
.dash-round .dr-others { align-items: center; }
.dash-round .dr-lbl { font-weight: 600; }
.dash-round .dr-chip.on { background: #4338ca; border-color: #4338ca; color: #fff; font-weight: 700; }
.dash-round .dr-chip.on:hover { background: #3730a3; border-color: #3730a3; }
.dash-round .dr-chip b { font-weight: 700; opacity: .85; }
.dash-round .dr-chip em { font-style: normal; font-size: .7rem; background: #dcfce7; color: #166534; border-radius: 999px; padding: 0 6px; margin-left: 3px; }
.dash-round .dr-chip.on em { background: rgba(255,255,255,.22); color: #fff; }
.dash-round .dr-hint { color: #6d5bd0; font-size: .74rem; }

/* คลิกรายวิชาในหน้า "ความคืบหน้าการยืนยัน" เพื่อเปิดตารางเชื่อมโยง (เจ้าของสั่ง 2026-09-10) */
.dash-table tbody tr[data-code]:has(.dc-table) { cursor: pointer; }
.dc-files .dc-table { margin-right: 4px; }

/* หัวคอลัมน์ตารางเชื่อมโยง = รหัส + ชื่อหน่วยสมรรถนะ (เจ้าของสั่ง 2026-09-10 — เดิมชื่ออยู่แถวล่างสุด) */
.cov-matrix thead th:not(.cm-first) { white-space: normal; vertical-align: top; min-width: 118px; max-width: 158px; padding: 8px 8px 9px; line-height: 1.3; }
.cov-matrix thead th .cm-code { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.cov-matrix thead th .cm-uname { display: block; margin-top: 3px; font-weight: 500; font-size: .73rem; color: var(--text-secondary); }
.cov-matrix thead th.bad .cm-uname { color: #b91c1c; }

/* ปุ่มส่งออก JSON (เจ้าของสั่ง 2026-09-10) */
.dash-json { display: inline-flex; align-items: center; gap: 6px; }
.dash-export.json { background: #0f172a; border-color: #0f172a; }
.dash-export.json:hover { background: #1e293b; border-color: #1e293b; }
.dash-json-all { font-size: .76rem; font-weight: 700; color: #334155; text-decoration: none; border-bottom: 1px dashed #94a3b8; }
.dash-json-all:hover { color: #0f172a; border-bottom-style: solid; }