/* Time Line สินค้า — ตารางตามหัวข้อในไฟล์ Time Line Product.xlsx
   ทุกคลาสขึ้นต้น tl- และครอบด้วย .tl-root เพื่อไม่ให้ไปทับสไตล์อื่นในแดชบอร์ด */
.tl-root{
  --tl-surface:var(--surface,#fff);
  --tl-surface2:var(--surface2,#f7faff);
  --tl-border:var(--border,#d4e0f0);
  --tl-text:var(--text,#0f172a);
  --tl-text2:var(--text2,#475569);
  --tl-muted:var(--muted,#94a3b8);
  --tl-accent:var(--accent,#f56e00);
  color:var(--tl-text);
}

/* ── แถบหัวเรื่อง + สลับมุมมอง ─────────────────────── */
.tl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tl-h1{font-size:17px;font-weight:800;margin-right:auto}
.tl-h1 small{display:block;font-size:11.5px;font-weight:500;color:var(--tl-muted);margin-top:3px}
.tl-vbtn{padding:8px 16px;border-radius:20px;border:2px solid;background:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.tl-vbtn.on{color:#fff!important}

/* ── การ์ดสรุป ────────────────────────────────────── */
.tl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.tl-kpi{background:var(--tl-surface);border:1px solid var(--tl-border);border-left:4px solid;border-radius:12px;padding:12px 14px}
.tl-kpi-lbl{font-size:11px;color:var(--tl-muted);font-weight:600}
.tl-kpi-val{font-size:21px;font-weight:800;margin-top:2px}

/* ── ตัวกรอง ──────────────────────────────────────── */
.tl-bar{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:12px;padding:11px 14px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tl-in{border:1.5px solid var(--tl-border);border-radius:9px;padding:7px 11px;font-size:12.5px;font-family:inherit;background:var(--tl-surface2);color:var(--tl-text);outline:none}
.tl-in:focus{border-color:var(--tl-accent);background:#fff}
select.tl-in{cursor:pointer}
.tl-count{margin-left:auto;font-size:12px;color:var(--tl-muted);font-weight:600}
.tl-count b{color:var(--tl-accent)}
.tl-btn{padding:7px 14px;border-radius:9px;border:1.5px solid;background:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}

/* ── ตาราง ────────────────────────────────────────── */
.tl-wrap{border:1px solid var(--tl-border);border-radius:12px;overflow:auto;background:var(--tl-surface);max-height:72vh}
.tl-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.tl-tbl th{background:var(--tl-surface2);padding:7px 9px;font-size:11px;font-weight:700;color:var(--tl-text2);border-bottom:1px solid var(--tl-border);border-right:1px solid var(--tl-border);white-space:nowrap;text-align:center;position:sticky;top:0;z-index:3}
.tl-tbl th.tl-r2{top:28px}
.tl-tbl th.tl-grp{background:#eef4ff;color:#1e40af;letter-spacing:.3px}
.tl-tbl td{padding:7px 9px;border-bottom:1px solid rgba(148,163,184,.16);border-right:1px solid rgba(148,163,184,.12);vertical-align:middle}
.tl-tbl tbody tr:hover td{background:var(--tl-surface2)}
.tl-tbl .tl-c{text-align:center}
.tl-tbl .tl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ชื่อสินค้าตรึงไว้ซ้ายมือ เลื่อนตารางแล้วยังเห็นว่าแถวไหน */
.tl-tbl .tl-name{position:sticky;left:0;background:var(--tl-surface);z-index:2;min-width:230px;font-weight:600;box-shadow:1px 0 0 var(--tl-border)}
.tl-tbl tbody tr:hover .tl-name{background:var(--tl-surface2)}
.tl-tbl th.tl-name{z-index:4}
.tl-sub{font-size:10.5px;color:var(--tl-muted);font-weight:500;margin-top:2px}

/* ── ชิปสถานะ ─────────────────────────────────────── */
.tl-chip{display:inline-block;padding:2.5px 9px;border-radius:11px;font-size:10.5px;font-weight:700;white-space:nowrap}
.tl-note{font-size:10.5px;color:var(--tl-text2);margin-top:3px;line-height:1.45;max-width:190px}

/* ไอคอนสถานะงาน 9 หัวข้อ — เล็กแต่อ่านออกด้วยสีและรูป */
.tl-task{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:800;cursor:help}
.tl-t-done{background:#dcfce7;color:#15803d}
.tl-t-prog{background:#fef3c7;color:#b45309}
.tl-t-wait{background:#e0e7ff;color:#4338ca}
.tl-t-none{background:#f1f5f9;color:#cbd5e1}

/* ── แถบความคืบหน้า ───────────────────────────────── */
.tl-prog{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tl-prog-bar{width:52px;height:7px;border-radius:4px;background:#e2e8f0;overflow:hidden;flex-shrink:0}
.tl-prog-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#f59e0b,#22c55e)}
.tl-prog-txt{font-size:11px;font-weight:700;color:var(--tl-text2)}

/* ── คำอธิบายสัญลักษณ์ ───────────────────────────── */
.tl-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:11px;padding:10px 14px;background:var(--tl-surface2);border:1px solid var(--tl-border);border-radius:11px;font-size:11.5px;color:var(--tl-text2)}
.tl-legend b{color:var(--tl-text)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}

.tl-act{display:flex;gap:5px;justify-content:center}
.tl-ibtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--tl-border);background:#fff;cursor:pointer;font-size:12px;padding:0;line-height:1}
.tl-ibtn:hover{border-color:var(--tl-accent);background:#fff7ed}

/* ── Export dropdown ─────────────────────────────── */
.tl-export-wrap{position:relative}
.tl-export-btn{display:flex;align-items:center;gap:4px}
.tl-export-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:20;min-width:170px;overflow:hidden}
.tl-export-menu button{display:block;width:100%;padding:10px 14px;border:none;background:none;text-align:left;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--tl-text)}
.tl-export-menu button:hover{background:var(--tl-surface2)}

.tl-empty{text-align:center;padding:56px 20px;color:var(--tl-muted)}
.tl-empty .tl-big{font-size:42px;opacity:.5;margin-bottom:10px}
.tl-empty h3{font-size:15.5px;color:var(--tl-text2);margin-bottom:5px}

/* ── ฟอร์ม ────────────────────────────────────────── */
.tl-form{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:16px;overflow:hidden;max-width:1000px;margin:0 auto}
.tl-form-hd{padding:16px 20px;color:#fff;font-size:16px;font-weight:800}
.tl-form-bd{padding:18px 20px}
.tl-sec{font-size:13px;font-weight:800;color:var(--tl-accent);margin:16px 0 10px;display:flex;align-items:center;gap:7px}
.tl-sec:first-child{margin-top:0}
.tl-sec::before{content:'';width:4px;height:15px;background:var(--tl-accent);border-radius:2px}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tl-fld label{display:block;font-size:11px;font-weight:700;color:var(--tl-muted);margin-bottom:5px}
.tl-fld .tl-in{width:100%;box-sizing:border-box}
.tl-form-ft{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--tl-border);background:var(--tl-surface2)}

/* ── กำหนดเสร็จ (Deadline indicators) ──────────────── */
.tl-dl-over{box-shadow:0 0 0 2.5px #ef4444;animation:tl-pulse 2s infinite}
.tl-dl-soon{box-shadow:0 0 0 2.5px #f59e0b}
.tl-dl-done{box-shadow:0 0 0 2px #22c55e}
@keyframes tl-pulse{0%,100%{box-shadow:0 0 0 2.5px #ef4444}50%{box-shadow:0 0 0 2.5px rgba(239,68,68,.3)}}
.tl-dl-date{font-size:9.5px;color:var(--tl-muted);margin-top:2px;white-space:nowrap;line-height:1.2}
.tl-dl-txt-over{color:#dc2626;font-weight:700}
.tl-dl-txt-soon{color:#d97706;font-weight:600}
.tl-dl-input{margin-top:5px;font-size:11px!important;padding:4px 6px!important}

/* ── Gantt timeline strip ─────────────────────────── */
.tl-gantt{margin-top:14px;padding:14px;background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:12px}
.tl-gantt .tl-sec{margin-top:0;margin-bottom:10px}
.tl-gantt-head{display:flex;gap:8px;margin-bottom:4px}
.tl-gantt-row{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid rgba(148,163,184,.1)}
.tl-gantt-row:last-child{border-bottom:none}
.tl-gantt-name{width:180px;flex-shrink:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-gantt-bar{flex:1;position:relative;height:20px;background:var(--tl-surface2);border-radius:10px;overflow:visible}
.tl-gantt-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;z-index:1;cursor:help;transition:transform .15s}
.tl-gantt-dot:hover{transform:translate(-50%,-50%) scale(1.5);z-index:2}
.tl-gantt-today{position:absolute;top:-2px;bottom:-2px;width:2px;background:#ef4444;z-index:1}
.tl-gantt-today::after{content:'วันนี้';position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:8.5px;color:#ef4444;font-weight:700;white-space:nowrap}

/* ── Card layout ─────────────────────────────────── */
.tl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.tl-card{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.tl-card:hover{border-color:var(--tl-accent);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.tl-card-open{border-color:var(--tl-accent)}

.tl-cd-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
.tl-cd-seq{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:var(--tl-surface2);font-size:11px;font-weight:800;color:var(--tl-muted);flex-shrink:0;margin-top:1px}
.tl-cd-name{font-size:13.5px;font-weight:700;color:var(--tl-text);flex:1;min-width:0;line-height:1.3}
.tl-cd-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px;padding-left:32px}
.tl-cd-ch{font-size:10.5px;color:var(--tl-text2);background:var(--tl-surface2);padding:2px 8px;border-radius:8px;white-space:nowrap}
.tl-cd-actions{display:flex;gap:4px;margin-left:auto;flex-shrink:0}

.tl-cd-status{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tl-cd-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:9px;white-space:nowrap}
.tl-cd-over{background:#fef2f2;color:#dc2626}
.tl-cd-soon{background:#fffbeb;color:#d97706}
.tl-cd-ok{background:#f0fdf4;color:#16a34a}
.tl-cd-sell{font-size:10.5px;color:var(--tl-muted);margin-left:auto;white-space:nowrap}

.tl-cd-progress{display:flex;align-items:center;gap:8px}
.tl-cd-tasks{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.tl-cd-tasks .tl-task{width:22px;height:22px;font-size:10px;border-radius:6px}
.tl-cd-bar{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tl-cd-expand{font-size:11px;color:var(--tl-muted);margin-left:4px;flex-shrink:0}

.tl-cd-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--tl-border);cursor:default}
.tl-cd-detail{animation:tl-slideDown .2s ease}
@keyframes tl-slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:600px}}
.tl-cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tl-cd-item{padding:8px 10px;background:var(--tl-surface2);border-radius:8px;font-size:11.5px}
.tl-cd-item-lbl{font-weight:700;color:var(--tl-text2);margin-bottom:3px;font-size:10.5px}
.tl-cd-item-val{font-weight:600}
.tl-cd-item-dl{font-size:10px;color:var(--tl-muted);margin-top:3px}
.tl-cd-item-dl-over{color:#dc2626;font-weight:700}
.tl-cd-item-dl-soon{color:#d97706;font-weight:600}
.tl-cd-note{font-size:11px;color:var(--tl-text2);margin-top:8px;padding:6px 10px;background:var(--tl-surface2);border-radius:8px;line-height:1.5}

.tl-layout-toggle{display:flex;gap:2px}
.tl-lbtn{width:30px;height:30px;border-radius:7px;border:1.5px solid var(--tl-border);background:var(--tl-surface);cursor:pointer;font-size:14px;line-height:1;padding:0;color:var(--tl-muted);transition:all .12s}
.tl-lbtn.on{border-color:var(--tl-accent);color:var(--tl-accent);background:#fff7ed}

@media print{
  .tl-bar,.tl-act,.tl-vbtn,.tl-btn{display:none!important}
  .tl-wrap{max-height:none;overflow:visible}
  .tl-tbl th{position:static}
  .tl-tbl .tl-name{position:static;box-shadow:none}
}

/* คอลัมน์สถานะมีหมายเหตุต่อท้าย ถ้าไม่กว้างพอข้อความจะถูกตัดเป็นคำละบรรทัด */
.tl-tbl .tl-st{min-width:124px}
.tl-tbl td.tl-st{text-align:center}
.tl-tbl td.tl-st .tl-note{max-width:none;text-align:center}

/* ── Pipeline progress (compact dots in card) ──── */
.tl-pipe-compact{display:flex;align-items:center;gap:2px;padding:8px 0;overflow-x:auto}
.tl-pdot{width:14px;height:14px;border-radius:50%;flex-shrink:0;transition:transform .12s}
.tl-pdot:hover{transform:scale(1.3);z-index:1}
.tl-pdot-done{background:#22c55e}
.tl-pdot-active{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25);animation:tl-pulse-dot 2s infinite}
.tl-pdot-fail{background:#ef4444}
.tl-pdot-grey{background:#e2e8f0}
.tl-pdot-pend{background:#e2e8f0}
.tl-pline{flex:1;height:2px;background:#e2e8f0;min-width:4px}
.tl-pline-done{background:#22c55e}
.tl-pline-grey{background:#e2e8f0}
.tl-pipe-pct{font-size:10.5px;font-weight:700;color:var(--tl-muted);margin-left:6px;white-space:nowrap}
@keyframes tl-pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.25)}50%{box-shadow:0 0 0 6px rgba(245,158,11,.08)}}

/* ── Pipeline full (expanded detail) ───────────── */
.tl-pipe{display:flex;align-items:flex-start;gap:0;padding:10px 0;overflow-x:auto}
.tl-pipe-step{display:flex;flex-direction:column;align-items:center;min-width:56px;flex-shrink:0}
.tl-pipe-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#e2e8f0;color:#94a3b8;transition:all .15s}
.tl-pipe-done .tl-pipe-dot{background:#22c55e;color:#fff}
.tl-pipe-active .tl-pipe-dot{background:#f59e0b;color:#fff;box-shadow:0 0 0 4px rgba(245,158,11,.2);animation:tl-pulse-dot 2s infinite}
.tl-pipe-fail .tl-pipe-dot{background:#ef4444;color:#fff}
.tl-pipe-grey .tl-pipe-dot{background:#f1f5f9;color:#cbd5e1}
.tl-pipe-lbl{font-size:9.5px;font-weight:600;color:var(--tl-text2);margin-top:4px;text-align:center;max-width:60px;line-height:1.2}
.tl-pipe-done .tl-pipe-lbl{color:#16a34a}
.tl-pipe-active .tl-pipe-lbl{color:#b45309;font-weight:700}
.tl-pipe-fail .tl-pipe-lbl{color:#dc2626}
.tl-pipe-grey .tl-pipe-lbl{color:#cbd5e1}
.tl-pipe-line{width:20px;height:2px;background:#e2e8f0;margin-top:13px;flex-shrink:0}
.tl-pipe-line-done{background:#22c55e}
.tl-pipe-line-grey{background:#f1f5f9}

/* ── Status banners ────────────────────────────── */
.tl-banner{padding:8px 12px;border-radius:8px;font-size:11.5px;font-weight:600;margin:6px 0;line-height:1.4}
.tl-banner span{font-weight:500;opacity:.85}
.tl-banner-term{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.tl-banner-fail{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.tl-banner-stuck{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.tl-banner-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ── Top bar banners (ready / terminated) ──────── */
.tl-topbar{font-size:11px;font-weight:800;text-align:center;padding:6px 0;letter-spacing:.3px;border-radius:var(--tl-radius) var(--tl-radius) 0 0;margin:-13px -13px 8px -13px}
.tl-topbar-ready{background:linear-gradient(90deg,#16a34a,#15803d);color:#fff}
.tl-topbar-term{background:linear-gradient(90deg,#dc2626,#b91c1c);color:#fff}

/* ── Terminated card ───────────────────────────── */
.tl-card-term{border:2px solid #ef4444}
.tl-card-term .tl-cd-detail{opacity:.65}
.tl-card-term .tl-pipe-compact{opacity:.5}

/* ── Ready card ────────────────────────────────── */
.tl-card-ready{border:2px solid #22c55e}

/* ── Phase badge in card ───────────────────────── */
.tl-cd-phase{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;margin-bottom:8px}
.tl-cd-phase .tl-cd-sell{margin-left:auto;font-size:10.5px;color:var(--tl-muted)}

/* ── Expand row ────────────────────────────────── */
.tl-cd-expand-row{text-align:center;padding-top:4px}
.tl-cd-expand-row .tl-cd-expand{font-size:10.5px;color:var(--tl-muted);cursor:pointer}

/* ── Mini section headers ──────────────────────── */
.tl-sec-mini{font-size:12px;font-weight:700;color:var(--tl-accent);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--tl-border)}

/* ── Tasting history ───────────────────────────── */
.tl-taste-hist{display:flex;flex-direction:column;gap:6px}
.tl-taste-row{display:flex;gap:10px;align-items:flex-start;padding:6px 10px;background:var(--tl-surface2);border-radius:8px;font-size:11.5px}
.tl-taste-num{font-weight:700;color:var(--tl-text2);white-space:nowrap;min-width:60px}
.tl-taste-info{display:flex;flex-direction:column;gap:2px}
.tl-taste-info span{line-height:1.4}

/* ── Status grid ───────────────────────────────── */
.tl-cd-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl-st-box{padding:8px 10px;background:var(--tl-surface2);border-radius:8px}
.tl-st-lbl{display:block;font-size:10px;font-weight:700;color:var(--tl-muted);margin-bottom:4px}

/* ── Checklist ─────────────────────────────────── */
.tl-checklist{padding:8px 0}
.tl-cl-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tl-cl-title{font-size:11.5px;font-weight:600;color:var(--tl-text2)}
.tl-cl-pct{font-size:18px;font-weight:800;margin-left:auto}
.tl-cl-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:8px}
.tl-cl-fill{height:100%;border-radius:4px;transition:width .3s}
.tl-cl-items{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px}
.tl-cl-item{color:var(--tl-muted);white-space:nowrap}
.tl-cl-done{color:#16a34a;font-weight:600}

/* ── Responsive pipeline ───────────────────────── */
@media(max-width:600px){
  .tl-pipe-step{min-width:42px}
  .tl-pipe-dot{width:22px;height:22px;font-size:10px}
  .tl-pipe-lbl{font-size:8px}
  .tl-pipe-line{width:10px}
  .tl-cards{grid-template-columns:1fr}
}