/* แท็บแผนงาน: บอร์ดงาน · ไทม์ไลน์ · ปฏิทิน · นำเข้า CSV (public/tasks.js) · ใช้ตัวแปรสีจาก app.css (โทนสว่าง/มืดตามธีม) */
.plan{display:grid;gap:12px;min-width:0}
.plan-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.plan-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);flex:1 1 340px;max-width:560px}
.plan-seg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:10px;background:none;color:var(--ink2);font:inherit;font-weight:600;cursor:pointer;min-width:0}
.plan-seg button .ic{width:20px;height:20px}
.plan-seg button[aria-selected="true"]{background:var(--brand);color:var(--brand-ink)}
.plan-act{flex:none}
.plan-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.plan-filters .plan-q{flex:1 1 220px;width:auto;min-width:0}
.plan-filters .plan-team{flex:0 1 220px;width:auto}
.plan-card{display:grid;gap:10px;align-content:start}
.plan-hint{margin:0}
.plan-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.plan-range{min-width:140px;text-align:center;font-size:15px}
.plan-nav .filters{margin-left:auto}
.plan-nav select{width:auto;min-height:34px;padding:4px 10px;font-size:14px}
@media (max-width:620px){
  .plan-seg{flex-basis:100%;max-width:none}
  .plan-seg button{flex-direction:column;gap:0;font-size:13px;min-height:50px}
  /* ปุ่ม 4 ปุ่มแถวเดียว ไอคอนบน ชื่อล่าง (ไม่ล้นขอบการ์ด) */
  .plan-act{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
  .plan-act>.btn{flex-direction:column;gap:1px;min-width:0;min-height:50px;padding:4px 2px;font-size:12.5px;line-height:1.25;white-space:nowrap}
  .plan-act>.btn .lbl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .plan-filters{flex-wrap:nowrap}
  .plan-filters .filters{flex-wrap:nowrap;flex:none;gap:4px}
  .plan-filters .filters .pill{flex-direction:row;gap:4px;padding:4px 10px;font-size:13px;min-height:44px}
  .plan-filters .plan-q{flex:1 1 0}
  .plan-filters:has(.plan-team){flex-wrap:wrap}
  .plan-filters .plan-team{flex:1 1 100%;order:3}
  .plan-nav .filters{margin-left:0;flex-basis:100%}
  .plan-nav select{flex:1 1 100%}
  .plan-range{flex:1;min-width:0}
}

/* ---------- บอร์ดงาน ---------- */
.tk-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.tk-col{background:var(--page);border-radius:14px;padding:10px;display:grid;gap:8px;min-height:140px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
.tk-col.over{box-shadow:inset 0 0 0 2px var(--brand)}
.tk-col>header{display:flex;align-items:center;gap:6px;font-size:14px;min-height:34px}
.tk-col>header .ic{width:18px;height:18px;color:var(--ink2)}
.tk-col>header .btn{margin-left:auto}
.tk-col.c-doing>header .ic{color:var(--info)}
.tk-col.c-done>header .ic{color:var(--good)}
.tk-list{display:grid;gap:8px}
.tk-empty{font-size:13px;color:var(--muted);padding:16px 8px;text-align:center;border:1px dashed var(--line);border-radius:10px}
.tk-card{background:var(--surface);border-radius:12px;padding:10px 12px;display:grid;gap:6px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);border-left:4px solid var(--u1);min-width:0}
.tk-card.p1{border-left-color:var(--grid)}
.tk-card.p3{border-left-color:var(--u3)}
.tk-card.p4{border-left-color:var(--u4)}
.tk-card:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.tk-card.late{background:color-mix(in srgb,var(--u4) 7%,var(--surface))}
.tk-card.drag{opacity:.45}
.tk-card.s-done .tk-title,.tk-card.s-cancelled .tk-title{color:var(--muted);text-decoration:line-through}
.tk-row1{display:flex;gap:8px;align-items:flex-start}
.tk-title{font-weight:600;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.tk-title .ic{color:var(--u3);margin-right:4px;width:15px;height:15px}
.tk-check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);background:none;padding:0;display:grid;place-items:center;cursor:pointer;color:transparent;margin-top:1px}
.tk-check .ic{width:14px;height:14px}
.tk-check:hover{border-color:var(--good);color:var(--good)}
.tk-check.on{background:var(--good);border-color:var(--good);color:#fff}
.tk-meta{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12.5px;min-width:0}
.tk-meta .chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip.tk-due,.chip.tk-pri{display:inline-flex;align-items:center;gap:3px}
.tk-due .ic,.tk-pri .ic,.tk-who .ic{width:13px;height:13px}
.chip.tk-due.bad{background:color-mix(in srgb,var(--u4) 22%,transparent);color:var(--u4);font-weight:600}
.chip.tk-due.warn{background:color-mix(in srgb,var(--u2) 32%,transparent);font-weight:600}
.chip.tk-pri.p3{background:color-mix(in srgb,var(--u3) 26%,transparent)}
.chip.tk-pri.p4{background:var(--u4);color:#fff}
.chip.tk-st.s-doing{background:color-mix(in srgb,var(--info) 28%,transparent)}
.chip.tk-st.s-done{background:color-mix(in srgb,var(--good) 28%,transparent)}
.tk-who{color:var(--ink2);display:inline-flex;gap:3px;align-items:center;min-width:0;overflow-wrap:anywhere}
.tk-prog{height:4px;border-radius:4px;background:var(--grid);overflow:hidden}
.tk-prog i{display:block;height:100%;background:var(--info)}
@media (max-width:859px){
  /* มือถือ: คอลัมน์เลื่อนซ้าย-ขวาทีละคอลัมน์ (เฉพาะในบอร์ด หน้าไม่เลื่อนข้าง) */
  .tk-board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,86%);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}
  .tk-col{scroll-snap-align:start}
}

/* ---------- ไทม์ไลน์ (แกนต์) ---------- */
.tl-wrap{--lab:220px;overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);max-height:70vh;overflow-y:auto}
.tl{min-width:calc(var(--lab) + var(--n) * var(--dayw));font-size:13px}
.tl-head{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);position:sticky;top:0;z-index:4;background:var(--surface);border-bottom:1px solid var(--grid)}
.tl-lab{position:sticky;left:0;z-index:3;background:var(--surface);display:flex;align-items:center;gap:6px;padding:0 10px;min-width:0;border-right:1px solid var(--grid)}
.tl-corner{font-size:12px;color:var(--muted)}
.tl-months{display:flex;border-bottom:1px solid var(--grid)}
.tl-months span{min-width:0;padding:2px 6px;font-size:12.5px;white-space:nowrap;overflow:clip;border-left:1px solid var(--grid)}
.tl-months span:first-child{border-left:0}
.tl-months b{display:inline-block;position:sticky;left:calc(var(--lab) + 6px);font-weight:600}
.tl-days{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.tl-days span{text-align:center;font-size:11.5px;color:var(--ink2);padding:2px 0;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-days span small{display:block;font-size:10.5px;color:var(--muted)}
.tl-days span.we{color:var(--muted)}
.tl-days span.today{color:var(--brand-ink);background:var(--brand);border-radius:6px;font-weight:700}
.tl-days span.today small{color:inherit}
.tl-body{position:relative}
.tl-bg{position:absolute;top:0;bottom:0;left:var(--lab);right:0;pointer-events:none;z-index:0}
.tl-bg .we{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--grid) 50%,transparent)}
.tl-bg .now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--u4);opacity:.8}
.tl-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);min-height:34px;border-bottom:1px solid var(--grid)}
.tl-row:last-child{border-bottom:0}
button.tl-lab{border:0;border-right:1px solid var(--grid);border-radius:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-height:34px}
button.tl-lab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.tl-lab .ic{width:15px;height:15px;color:var(--muted)}
button.tl-lab:hover{background:var(--tint)}
button.tl-lab.s-done span,button.tl-lab.s-cancelled span{color:var(--muted);text-decoration:line-through}
.tl-grp{min-height:30px}
.tl-grp .tl-lab{background:var(--page);font-size:13px}
.tl-grp .tl-lab b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-grp .tl-track{background:color-mix(in srgb,var(--page) 60%,transparent)}
.tl-track{position:relative;z-index:1;min-width:0}
.tl-bar{position:absolute;top:6px;bottom:6px;border:0;border-radius:6px;padding:0 6px;font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--u1);text-align:left;overflow:hidden;cursor:pointer;min-width:6px;display:flex;align-items:center}
.tl-bar span{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-bar .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28)}
.tl-bar:hover,.tl-bar:focus-visible{filter:brightness(1.08);box-shadow:0 0 0 2px var(--brand)}
.tl-bar.s-doing{background:var(--info)}
.tl-bar.s-done{background:var(--good)}
.tl-bar.k-event{background:var(--brand);color:var(--brand-ink)}
.tl-bar.k-event.s-done{background:color-mix(in srgb,var(--brand) 45%,var(--surface))}
.tl-bar.s-cancelled{background:var(--grid);color:var(--muted);text-decoration:line-through}
.tl-bar.late{box-shadow:inset 0 0 0 2px var(--u4);background:color-mix(in srgb,var(--u4) 70%,var(--u1))}
.tl-bar.cut-l{border-top-left-radius:0;border-bottom-left-radius:0}
.tl-bar.cut-r{border-top-right-radius:0;border-bottom-right-radius:0}
.tl-bar.k-milestone{width:18px;min-width:0;padding:0;margin-left:-9px;background:none;overflow:visible;justify-content:center}
.tl-bar.k-milestone i{display:block;width:13px;height:13px;transform:rotate(45deg);background:var(--u3);border-radius:2px}
.tl-bar.k-milestone.s-done i{background:var(--good)}
.tl-bar.k-milestone.late{box-shadow:none}
.tl-bar.k-milestone.late i{background:var(--u4)}
.tl-key{flex-wrap:wrap;gap:6px 14px;margin:0}
.tl-sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px;background:var(--u1)}
.tl-sw.s-doing{background:var(--info)}
.tl-sw.s-done{background:var(--good)}
.tl-sw.k-event{background:var(--brand)}
.tl-sw.ms{background:var(--u3);transform:rotate(45deg) scale(.8)}
.tl-sw.late{background:none;box-shadow:inset 0 0 0 2px var(--u4)}
@media (max-width:640px){
  .tl-wrap{--lab:118px}
  .tl{font-size:12.5px}
  .tl-lab{padding:0 6px}
  button.tl-lab .ic{display:none}
}

/* ---------- ปฏิทิน ---------- */
.cal-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.cal-grid{grid-template-columns:minmax(0,1fr)}}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--grid);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--grid)}
.cal-wd{background:var(--surface);text-align:center;font-size:12.5px;color:var(--ink2);font-weight:600;padding:5px 0}
.cal-wd.we{color:var(--muted)}
.cal-cell{background:var(--surface);min-height:108px;padding:4px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0;outline-offset:-2px}
.cal-cell.we{background:color-mix(in srgb,var(--page) 55%,var(--surface))}
.cal-cell.out>*{opacity:.42}
.cal-cell:hover{background:var(--tint)}
.cal-cell.sel{box-shadow:inset 0 0 0 2px var(--brand)}
.cal-n{font-size:13px;font-weight:600;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none;font-variant-numeric:tabular-nums}
.cal-cell.today .cal-n{background:var(--brand);color:var(--brand-ink)}
.cal-chips{display:grid;gap:2px;min-width:0}
.cal-chip{display:block;width:100%;min-width:0;border:0;border-radius:5px;padding:1px 5px;font:inherit;font-size:11.5px;line-height:1.5;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--ink);background:color-mix(in srgb,var(--u1) 22%,transparent)}
.cal-chip b{margin-right:3px}
.cal-chip .ic{width:11px;height:11px;margin-right:2px}
.cal-chip.k-event{background:color-mix(in srgb,var(--brand) 40%,transparent)}
.cal-chip.k-milestone{background:color-mix(in srgb,var(--u3) 30%,transparent)}
.cal-chip.k-task.s-doing{background:color-mix(in srgb,var(--info) 28%,transparent)}
.cal-chip.s-done,.cal-chip.s-cancelled{opacity:.6;text-decoration:line-through}
.cal-chip.late{background:color-mix(in srgb,var(--u4) 26%,transparent);font-weight:600}
.cal-chip:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.cal-more{font-size:11px;color:var(--muted);padding-left:4px}
.cal-dots{display:none}
@media (max-width:640px){
  .cal-cell{min-height:56px;align-items:center;padding:3px 1px}
  .cal-chips{display:none}
  .cal-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:100%}
  .cal-dots i{width:6px;height:6px;border-radius:50%;background:var(--u1)}
  .cal-dots i.k-event{background:var(--bar)}
  .cal-dots i.k-milestone{background:var(--u3)}
  .cal-dots i.s-done{background:var(--good)}
  .cal-dots i.late{background:var(--u4)}
}
.cal-day{display:grid;gap:10px;align-content:start}
.cal-day h2{display:flex;align-items:center;gap:6px}
.cal-list{display:grid;gap:6px}
.cal-ag{display:grid;gap:14px}
.cal-ag section{display:grid;gap:6px}
.cal-ag .h3{margin:4px 0 0;flex-wrap:wrap}
.cal-ag .h3 .btn{margin-left:auto}
.cal-ag section.today .h3{color:var(--ink)}
.tk-item{display:grid;grid-template-columns:64px 10px minmax(0,1fr);gap:8px;align-items:start;text-align:left;border:0;background:var(--page);border-radius:10px;padding:8px 10px;font:inherit;color:var(--ink);cursor:pointer;width:100%}
.tk-item:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.tk-time{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;padding-top:1px}
.tk-dot{width:10px;height:10px;border-radius:50%;background:var(--u1);margin-top:7px}
.tk-item.k-event .tk-dot{background:var(--bar)}
.tk-item.k-milestone .tk-dot{background:var(--u3);border-radius:2px;transform:rotate(45deg)}
.tk-item.s-done .tk-dot{background:var(--good)}
.tk-item.late .tk-dot{background:var(--u4)}
.tk-it{display:grid;min-width:0}
.tk-it b{font-weight:600;overflow-wrap:anywhere}
.tk-it small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.tk-item.s-done b,.tk-item.s-cancelled b{text-decoration:line-through;color:var(--muted)}

/* ---------- หน้าต่างรายละเอียด / ฟอร์ม / นำเข้า ---------- */
dialog.tk-dlg{height:auto;max-height:calc(100dvh - 32px)}
dialog.tk-wide{width:min(1100px,calc(100% - 16px))}
.tk-dlg-body{display:grid;gap:12px;align-content:start;min-height:0}
.tk-detail{display:grid;gap:12px}
.tk-status{display:flex;flex-wrap:wrap;gap:6px}
.tk-status .btn[aria-checked="true"],.tk-kind .btn[aria-checked="true"]{background:var(--brand);color:var(--brand-ink);box-shadow:none}
.tk-range{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.tk-range input{flex:1;min-height:0;padding:0;border:0;background:none;accent-color:#c99700}
.tk-range output{min-width:44px;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tk-late{display:flex;gap:6px;align-items:center;color:var(--u4);font-weight:600;font-size:14px}
.tk-info{padding:6px 14px}
.tk-info .kv-row{padding:7px 0}
.tk-info .kv-row .ic{width:18px;height:18px;color:var(--ink2)}
.tk-info .kv-row b{font-weight:600;overflow-wrap:anywhere}
.tk-text{white-space:pre-wrap;font-size:14px;overflow-wrap:anywhere}
form.tk-note{display:flex;gap:8px}
form.tk-note input{flex:1;min-width:0}
.tk-hist li div{overflow-wrap:anywhere;white-space:pre-wrap;font-size:14px}
.tk-hist li.e-note{border-left-color:var(--brand)}
.tk-hist li.e-status{border-left-color:var(--info)}
.tk-hist li.e-import{border-left-color:var(--good)}
.tk-form label>span{font-size:13px;color:var(--ink2)}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px}
.tk-kind{display:flex;gap:6px;flex-wrap:wrap}
.tk-when{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:10px}
.tk-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.tk-pair input[type="time"]{width:128px}
.imp{display:grid;gap:10px}
.imp-src{display:grid;gap:6px}
.imp-src p{margin:0}
.imp-help{margin:4px 0 0;padding-left:18px;display:grid;gap:4px;color:var(--ink2)}
.imp-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:8px}
.imp-map label{background:var(--surface);border-radius:10px;padding:8px;box-shadow:inset 0 0 0 1px var(--line);gap:4px;min-width:0}
.imp-map label.on{box-shadow:inset 0 0 0 2px var(--brand)}
.imp-col{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-map select{min-height:36px;padding:4px 8px;font-size:13.5px}
.imp-map small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.imp-counts{gap:14px}
.imp .tbl{max-height:min(50vh,520px);overflow:auto;background:var(--surface);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.imp-tbl{min-width:760px;font-size:13.5px}
.imp-tbl thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.imp-tbl tr.a-error td{background:color-mix(in srgb,var(--u4) 8%,transparent)}
.imp-tbl tr.a-skip td,.imp-tbl tr.a-same td{color:var(--muted)}
.imp-warn{display:flex;gap:4px;color:var(--u3);align-items:flex-start}
.imp-warn .ic{width:14px;height:14px;flex:none;margin-top:3px;color:var(--u3)}

/* ---------- ชีตที่เชื่อม ---------- */
.plan-sync{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px}
.plan-sync-it{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.plan-sync-it>.ic{width:16px;height:16px;color:var(--good);flex:none}
.plan-sync-it.bad>.ic{color:var(--danger)}
.plan-sync-it a{font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-sync-it>.muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.plan-sync-it.bad>.muted{color:var(--danger)}
.imp-linked{display:grid;gap:8px}
.imp-linked:empty{display:none}
.imp-src-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--surface);border-radius:10px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--line)}
.imp-src-t{min-width:0;flex:1 1 220px}
.imp-src-t b{overflow-wrap:anywhere}