/* ============================================================
 * โมดูลตรวจงานตามหน่วยงานฝึก (admin) — task-check board
 * ใช้ token จาก css/theme.css · prefix .tk- กันชนคลาสเดิมของแอป
 * ทุกกฎ scope ใต้ #view-tasks
 * ============================================================ */
#view-tasks{
  --tk-sunk:#FBF7EF;
  --tk-line-soft:#F0E8D8;
  --tk-ok:var(--ok); --tk-ok-tint:#E4F1E9;
  --tk-warn:var(--warn); --tk-warn-tint:#FBEFD6;
  --tk-late:var(--bad); --tk-late-tint:#F8E3DF;
  --tk-gold-tint:var(--gold-light);
}

#view-tasks .tk-head{margin-bottom:18px}
#view-tasks .tk-eyebrow{font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-dark); margin:0 0 6px}
#view-tasks .tk-head h1{font-size:26px; line-height:1.2; font-weight:700; margin:0 0 6px; color:var(--ink)}
#view-tasks .tk-head p{margin:0; color:var(--ink-2); max-width:64ch; font-size:14.5px}

/* summary tiles */
#view-tasks .tk-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 20px}
#view-tasks .tk-tile{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--sh-sm); position:relative; overflow:hidden}
#view-tasks .tk-tile .tk-k{font-size:12px; color:var(--ink-2); font-weight:500}
#view-tasks .tk-tile .tk-v{font-size:26px; font-weight:700; margin-top:7px; font-variant-numeric:tabular-nums}
#view-tasks .tk-tile .tk-sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
#view-tasks .tk-tile.late .tk-v{color:var(--tk-late)} #view-tasks .tk-tile.warn .tk-v{color:var(--tk-warn)} #view-tasks .tk-tile.ok .tk-v{color:var(--tk-ok)}
#view-tasks .tk-tile .tk-stripe{position:absolute; left:0; top:0; bottom:0; width:3px}
#view-tasks .tk-tile.total .tk-stripe{background:var(--gold-bright)} #view-tasks .tk-tile.late .tk-stripe{background:var(--tk-late)}
#view-tasks .tk-tile.warn .tk-stripe{background:var(--tk-warn)} #view-tasks .tk-tile.ok .tk-stripe{background:var(--tk-ok)}

/* toolbar */
#view-tasks .tk-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
#view-tasks .tk-search{flex:1 1 240px; min-width:180px; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 13px; box-shadow:var(--sh-sm)}
#view-tasks .tk-search input{border:0; background:transparent; outline:none; color:var(--ink); font:inherit; width:100%}
#view-tasks .tk-search svg{color:var(--ink-3); flex:none}
#view-tasks .tk-btn-gold{border:0; cursor:pointer; font:inherit; font-weight:600; font-size:13.5px; color:#fff; background:var(--gold-grad); padding:11px 18px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--sh-gold); transition:var(--t)}
#view-tasks .tk-btn-gold:hover{transform:translateY(-1px); box-shadow:0 9px 26px rgba(212,175,55,.45)}
#view-tasks .tk-btn-gold svg{color:#fff}

/* filters */
#view-tasks .tk-filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
#view-tasks .tk-chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:7px 12px; box-shadow:var(--sh-sm); min-width:0; flex:1 1 170px}
#view-tasks .tk-chip svg{color:var(--gold-dark); flex:none}
#view-tasks .tk-chip label{font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3); display:block}
#view-tasks .tk-chip .tk-fc{min-width:0; flex:1}
#view-tasks .tk-chip select{border:0; background:transparent; outline:none; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; width:100%; cursor:pointer}
#view-tasks .tk-clear{border:1px solid var(--line); background:var(--subtle); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:11px; cursor:pointer; white-space:nowrap; display:none}
#view-tasks .tk-clear.show{display:inline-flex; align-items:center; gap:6px}

/* groups */
#view-tasks .tk-groups{display:flex; flex-direction:column; gap:14px}
#view-tasks .tk-group{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-sm); overflow:hidden}
#view-tasks .tk-ghead{display:flex; align-items:center; gap:14px; padding:15px 18px; cursor:pointer; user-select:none}
#view-tasks .tk-chev{color:var(--ink-3); transition:transform .2s; flex:none}
#view-tasks .tk-group[open] .tk-chev{transform:rotate(90deg)}
#view-tasks .tk-gmain{min-width:0; flex:1}
#view-tasks .tk-gtitle{font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--ink)}
#view-tasks .tk-kind{font-size:11px; font-weight:600; color:var(--gold-dark); background:var(--tk-gold-tint); border:1px solid var(--line); padding:2px 9px; border-radius:999px}
#view-tasks .tk-gmeta{font-size:12.5px; color:var(--ink-3); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
#view-tasks .tk-gmeta .tk-sep{width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.6}
#view-tasks .tk-flag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
#view-tasks .tk-flag.late{color:var(--tk-late); background:var(--tk-late-tint)}
#view-tasks .tk-flag.done{color:var(--tk-ok); background:var(--tk-ok-tint)}
#view-tasks .tk-gprog{display:flex; align-items:center; gap:13px; flex:none}
#view-tasks .tk-ring{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--tk-ok) calc(var(--p,0)*1%), var(--tk-line-soft) 0)}
#view-tasks .tk-ring::before{content:""; position:absolute; width:34px; height:34px; border-radius:50%; background:var(--card)}
#view-tasks .tk-ring b{position:relative; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}
#view-tasks .tk-gcount{text-align:right; font-size:12px; color:var(--ink-2)}
#view-tasks .tk-gcount b{display:block; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums}

#view-tasks .tk-gbody{border-top:1px solid var(--tk-line-soft); padding:6px 18px 18px; display:none}
#view-tasks .tk-group[open] .tk-gbody{display:block}

#view-tasks .tk-zone{margin-top:14px}
#view-tasks .tk-zhead{display:flex; align-items:center; gap:8px; margin:6px 0 9px}
#view-tasks .tk-zhead h3{font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-2); margin:0}
#view-tasks .tk-zhead .tk-hr{flex:1; height:1px; background:var(--tk-line-soft)}
#view-tasks .tk-addmini{border:1px dashed var(--line); background:transparent; color:var(--gold-dark); font:inherit; font-size:12px; font-weight:600; padding:4px 11px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:5px}
#view-tasks .tk-addmini:hover{background:var(--tk-gold-tint)}

/* task rows */
#view-tasks .tk-tasks{display:flex; flex-direction:column; gap:1px; background:var(--tk-line-soft); border:1px solid var(--tk-line-soft); border-radius:11px; overflow:hidden}
#view-tasks .tk-task{display:flex; align-items:center; gap:12px; padding:10px 13px; background:var(--card)}
#view-tasks .tk-task:hover{background:var(--tk-sunk)}
#view-tasks .tk-chk{appearance:none; -webkit-appearance:none; width:19px; height:19px; border:2px solid var(--line); border-radius:6px; cursor:pointer; flex:none; display:grid; place-items:center; background:var(--card)}
#view-tasks .tk-chk:checked{background:var(--tk-ok); border-color:var(--tk-ok)}
#view-tasks .tk-chk:checked::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px)}
#view-tasks .tk-tlabel{flex:1; min-width:0; font-size:14px; color:var(--ink)}
#view-tasks .tk-task.done .tk-tlabel{color:var(--ink-3); text-decoration:line-through}
#view-tasks .tk-del{border:0; background:transparent; color:var(--ink-3); cursor:pointer; padding:4px; border-radius:6px; flex:none; opacity:.5}
#view-tasks .tk-del:hover{color:var(--tk-late); background:var(--tk-late-tint); opacity:1}
#view-tasks .tk-due{font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums}
#view-tasks .tk-due.soon{color:var(--tk-warn); background:var(--tk-warn-tint)}
#view-tasks .tk-due.late{color:var(--tk-late); background:var(--tk-late-tint)}
#view-tasks .tk-due.ok{color:var(--tk-ok); background:var(--tk-ok-tint)}
#view-tasks .tk-due.none{color:var(--ink-3); background:var(--subtle)}
#view-tasks .tk-task.done .tk-due{opacity:.55}

/* per-person */
#view-tasks .tk-person{border:1px solid var(--tk-line-soft); border-radius:12px; overflow:hidden; margin-bottom:9px}
#view-tasks .tk-phead{display:flex; align-items:center; gap:11px; padding:10px 13px; background:var(--tk-sunk); cursor:pointer; user-select:none}
#view-tasks .tk-av{width:30px; height:30px; border-radius:50%; background:var(--tk-gold-tint); color:var(--gold-dark); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; border:1px solid var(--line)}
#view-tasks .tk-pname{font-weight:600; font-size:14px; flex:1; min-width:0; color:var(--ink)}
#view-tasks .tk-pname small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px}
#view-tasks .tk-pbar{width:70px; height:6px; border-radius:999px; background:var(--tk-line-soft); overflow:hidden; flex:none}
#view-tasks .tk-pbar i{display:block; height:100%; background:var(--tk-ok); border-radius:999px}
#view-tasks .tk-pfrac{font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:none; min-width:30px; text-align:right}
#view-tasks .tk-pchev{color:var(--ink-3); transition:transform .2s; flex:none}
#view-tasks .tk-person[open] .tk-pchev{transform:rotate(90deg)}
#view-tasks .tk-ptasks{padding:3px 13px 11px; display:none}
#view-tasks .tk-person[open] .tk-ptasks{display:block}
#view-tasks .tk-ptask{display:flex; align-items:center; gap:11px; padding:8px 2px; border-bottom:1px solid var(--tk-line-soft)}
#view-tasks .tk-ptask:last-child{border-bottom:0}
#view-tasks .tk-ptask .tk-tlabel{font-size:13.5px}
#view-tasks .tk-ptask.done .tk-tlabel{color:var(--ink-3); text-decoration:line-through}

#view-tasks .tk-empty{text-align:center; color:var(--ink-3); font-size:14px; padding:34px 12px; background:var(--card); border:1px dashed var(--line); border-radius:14px}
#view-tasks .tk-hide{display:none!important}

/* modal */
#view-tasks .tk-overlay{position:fixed; inset:0; background:rgba(42,31,10,.44); display:none; align-items:flex-start; justify-content:center; padding:38px 16px; z-index:1200; overflow:auto}
#view-tasks .tk-overlay.show{display:flex}
#view-tasks .tk-modal{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-lg); width:100%; max-width:470px; overflow:hidden}
#view-tasks .tk-mhead{padding:16px 20px; border-bottom:1px solid var(--tk-line-soft); display:flex; align-items:center; gap:11px}
#view-tasks .tk-mi{width:34px; height:34px; border-radius:10px; background:var(--tk-gold-tint); color:var(--gold-dark); display:grid; place-items:center; flex:none}
#view-tasks .tk-mhead b{font-size:16px; font-weight:700; color:var(--ink)}
#view-tasks .tk-mhead small{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400}
#view-tasks .tk-x{margin-left:auto; border:0; background:transparent; color:var(--ink-3); cursor:pointer; padding:6px; border-radius:8px; display:grid; place-items:center}
#view-tasks .tk-x:hover{background:var(--subtle); color:var(--ink)}
#view-tasks .tk-mbody{padding:18px 20px; display:flex; flex-direction:column; gap:15px}
#view-tasks .tk-field > label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
#view-tasks .tk-req{color:var(--tk-late)}
#view-tasks .tk-inp{width:100%; border:1px solid var(--line); background:var(--tk-sunk); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink); outline:none}
#view-tasks .tk-inp:focus-visible{border-color:var(--gold-bright); box-shadow:0 0 0 3px var(--tk-gold-tint)}
#view-tasks textarea.tk-inp{resize:vertical; min-height:56px}
#view-tasks .tk-scope{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
#view-tasks .tk-scope button{border:1px solid var(--line); background:var(--tk-sunk); border-radius:11px; padding:11px 6px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:6px}
#view-tasks .tk-scope button svg{color:var(--ink-3)}
#view-tasks .tk-scope button[aria-pressed="true"]{border-color:var(--gold); background:var(--tk-gold-tint); color:var(--gold-dark)}
#view-tasks .tk-scope button[aria-pressed="true"] svg{color:var(--gold-dark)}
#view-tasks .tk-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#view-tasks .tk-mfoot{padding:14px 20px; border-top:1px solid var(--tk-line-soft); display:flex; gap:10px; justify-content:flex-end; background:var(--tk-sunk)}
#view-tasks .tk-btn-ghost{border:1px solid var(--line); background:var(--card); color:var(--ink-2); font:inherit; font-weight:600; font-size:13.5px; padding:10px 17px; border-radius:11px; cursor:pointer}

#view-tasks .tk-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:var(--card); font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:12px; box-shadow:var(--sh-lg); z-index:1300; opacity:0; transition:.25s; display:flex; align-items:center; gap:8px; pointer-events:none}
#view-tasks .tk-toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

#view-tasks .tk-loading{text-align:center; color:var(--ink-3); padding:40px 12px; font-size:14px}

@media (max-width:720px){
  #view-tasks .tk-tiles{grid-template-columns:repeat(2,1fr)}
  #view-tasks .tk-btn-gold{flex:1 1 100%; justify-content:center}
  #view-tasks .tk-gcount{display:none}
}
@media (prefers-reduced-motion:reduce){ #view-tasks *{transition:none!important} }