/* ========================================================================
   TRANG KẾ HOẠCH — style riêng (prefix .kh-)
   Tái dùng biến CSS + COLORS sẵn có của dashboard.html. KHÔNG tạo bảng màu mới.
   ======================================================================== */

.kh-root{display:flex;flex-direction:column;gap:14px}

/* ---------- Khung chung ---------- */
.kh-panel{
  background:var(--card-bg);
  border-radius:8px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--dd-red);
  padding:0;
  overflow:visible;
}
.kh-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.kh-panel-title{font-size:13px;font-weight:800;color:var(--dd-red)}
.kh-panel-meta{font-size:11px;color:var(--text-muted)}
.kh-panel-head.kh-between>.kh-panel-title{flex:1}

/* ---------- Thẻ lọc sticky (bọc cả tiêu đề + các ô lọc) ---------- */
/* .content có padding-top:8px; đẩy top:-8px để thẻ dính SÁT mép dưới topbar,
   bù lại bằng padding-top để nội dung không bị cắt. Nền đặc phủ kín khe. */
.kh-filter-card{
  position:sticky;top:-8px;z-index:40;
  background:var(--card-bg);
  border-radius:0 0 10px 10px;
  box-shadow:var(--shadow);
  padding:20px 16px 14px;
}
.kh-filter-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.kh-filter-title{font-size:13px;font-weight:800;color:var(--dd-red);letter-spacing:.3px}
.kh-filter-date{font-size:11px;color:var(--text-muted);font-weight:600}
.kh-filter-desc{font-size:11px;color:var(--text-muted);flex:1;min-width:180px}
.kh-filterbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
}
.kh-filter{display:flex;flex-direction:column;gap:3px;min-width:150px}
.kh-filter label{
  font-size:9px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.5px;font-weight:600;
}
.kh-filter-actions{display:flex;align-items:flex-end;gap:6px;margin-left:auto}

/* ---------- Multi-select có tìm kiếm ---------- */
.kh-ms{position:relative}
.kh-ms-toggle{
  width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:6px;
  background:#fff;color:var(--text);
  padding:5px 24px 5px 8px;font-size:11px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kh-ms-toggle:hover{border-color:var(--dd-red)}
.kh-ms-toggle::after{
  content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:10px;pointer-events:none;
}
.kh-ms-toggle.has-sel{border-color:var(--dd-red);background:var(--dd-red-light);color:var(--dd-red-dark)}
.kh-ms-panel{
  position:absolute;top:calc(100% + 4px);left:0;z-index:60;
  width:max(100%,210px);max-height:280px;overflow:auto;
  background:var(--card-bg);border:1px solid var(--border);border-radius:6px;
  box-shadow:var(--shadow-lg);padding:6px;
}
.kh-ms-panel.hidden{display:none}
.kh-ms-search{
  width:100%;box-sizing:border-box;margin-bottom:6px;
  border:1px solid var(--border);border-radius:5px;
  padding:5px 7px;font-size:11px;background:var(--dd-cream);
}
.kh-ms-search:focus{outline:2px solid var(--dd-yellow)}
.kh-ms-item{
  display:flex;align-items:center;gap:7px;
  padding:4px 6px;border-radius:4px;cursor:pointer;font-size:11px;
}
.kh-ms-item:hover{background:var(--dd-red-light)}
.kh-ms-item input{margin:0;cursor:pointer}
.kh-ms-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kh-ms-empty{font-size:11px;color:var(--text-muted);padding:6px;font-style:italic}
.kh-ms-actions{display:flex;justify-content:space-between;border-top:1px solid var(--border);margin-top:4px;padding-top:5px}
.kh-ms-actions button{
  background:none;border:none;color:var(--dd-red);font-size:10px;font-weight:700;
  cursor:pointer;padding:2px 5px;
}
.kh-ms-actions button:hover{text-decoration:underline}

/* ---------- Nút chung ---------- */
.kh-btn{
  border:1px solid var(--border);border-radius:5px;background:#fff;color:var(--text);
  padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;
  transition:all .12s;white-space:nowrap;
}
.kh-btn:hover{background:var(--dd-red-light);border-color:var(--dd-red)}
.kh-btn.active{background:var(--dd-red);color:#fff;border-color:var(--dd-red)}
.kh-btn:disabled{opacity:.5;cursor:not-allowed}
.kh-btn-primary{background:var(--dd-red);color:#fff;border-color:var(--dd-red)}
.kh-btn-primary:hover{background:var(--dd-red-dark)}

/* ---------- Slider N tháng (pill, đặt trong header biểu đồ) ---------- */
.kh-slider{
  display:flex;align-items:center;gap:8px;
  background:var(--dd-cream);border:1px solid var(--border);border-radius:20px;
  padding:4px 12px;
}
.kh-slider input[type=range]{width:150px;accent-color:var(--dd-red);cursor:pointer}
.kh-slider-label{font-size:11px;font-weight:700;color:var(--dd-red-dark);white-space:nowrap}
.kh-slider-hint{font-size:10px;color:var(--text-muted);white-space:nowrap}

/* ---------- Tree controls (L1/L2/L3) ---------- */
.kh-tree-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kh-tree-controls .kh-lbl{font-size:10px;color:var(--text-muted);font-weight:600;margin-right:2px}
.kh-btn-sq{min-width:30px;text-align:center;padding:4px 8px}

/* ---------- Biểu đồ ---------- */
.kh-chart-wrap{position:relative;width:100%;height:400px;padding:8px 12px}
.kh-note{
  font-size:11px;color:var(--sev-warning);font-style:italic;
  padding:2px 16px 12px;font-weight:600;
}
.kh-note.hidden{display:none}
/* Cảnh báo vượt phân bổ (phát hành > phân bổ). */
.kh-note-over{color:var(--sev-critical);padding:6px 16px 12px}

/* ---------- Bảng chung (tổng theo nhà máy + cây chi tiết) ---------- */
/* Style khớp bảng mẫu ảnh 1, 4: tiêu đề nền đỏ --dd-red chữ trắng đậm,
   dữ liệu trắng xen kẽ kem nhạt, viền xám nhạt, hover --dd-red-light.
   Không dùng màu mới — copy giá trị từ rule table th/td trong dashboard.html (~line 412). */
/* Bảng kế hoạch tự co theo khung nhìn, để thanh cuộn ngang không bị che. */
.kh-table-wrap{max-height:min(620px,calc(100dvh - 250px));overflow:auto;border:1px solid rgba(229,231,235,.9);border-radius:6px;margin:0 12px 12px}
.kh-tscroll{overflow:auto;border:1px solid rgba(229,231,235,.9);border-radius:6px;margin:0 12px 12px;max-height:min(620px,calc(100dvh - 250px))}
table.kh-table{border-collapse:collapse;width:100%;font-size:11px;table-layout:fixed}
table.kh-table th{
  position:sticky;top:0;z-index:20;
  background:var(--dd-red);color:#fff;
  padding:6px 8px;font-weight:700;font-size:12px;
  text-align:left;border-right:1px solid rgba(255,255,255,.28);
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
}
table.kh-table td{
  padding:5px 8px;border-bottom:1px solid var(--border);
  border-right:1px solid rgba(229,231,235,.85);background:var(--card-bg);
  color:var(--text,#1F2937);
}
table.kh-table tr:nth-child(even)>td{background:var(--dd-cream-2)}
table.kh-table tr:hover>td{background:var(--dd-red-light)}
table.kh-table th.num,table.kh-table td.num{text-align:right;font-variant-numeric:tabular-nums}
table.kh-table th.center,table.kh-table td.center{text-align:center}
/* Tiêu đề bảng chi tiết căn giữa; selector đủ ưu tiên để thắng rule .num. */
table.kh-table thead th{vertical-align:middle}
table.kh-table thead th.num{text-align:center}
.kh-col-tree{width:300px}
.kh-col-date{width:82px}
.kh-col-num{width:78px}
.kh-wrap-header{line-height:1.2}
table.kh-table th.kh-wrap-header{white-space:normal}
/* Cột con KL Phát Hành (Mới | Cập nhật | Tổng). table-layout:fixed lấy bề rộng
   theo ô ở DÒNG ĐẦU → cả nhóm lấy theo ô "KL Phát Hành" (colspan=3), chia đều. */
.kh-col-sub{width:56px}
.kh-ph-grp{width:170px;text-align:center;vertical-align:middle;border-bottom:2px solid rgba(255,255,255,.5)}
.kh-ph-tong{font-weight:800}
.kh-col-sub.kh-ph-capnhat{min-width:84px;white-space:normal;line-height:1.1}
td.kh-ph-capnhat{color:var(--text-muted)}
/* Selector gồm table + td để thắng font-weight của hàng cấp 1/cấp 2,
   nhưng chỉ áp dụng cho ô số phát hành, không hạ đậm ô tên. */
table.kh-table td.kh-ph-moi,table.kh-table td.kh-ph-capnhat,table.kh-table td.kh-ph-tong{font-weight:400;color:inherit}
.kh-plan-cell{line-height:1.15;white-space:nowrap}
.kh-plan-cell strong{display:block;font-size:1em;font-weight:400}
.kh-actual{display:block;font-size:1em;font-weight:400;margin-top:2px}
.kh-carry{display:block;font-size:1em;font-weight:400;margin-top:2px;color:#555}
.kh-actual-ok,.kh-actual-low{color:#1565c0}
.kh-warnings{padding:8px 12px;color:#9a5b00;background:#fff8e6;border-bottom:1px solid #efd79c}
/* Tiêu đề 2 tầng: dòng chính dính ở top:0 (cao 30px), dòng cột con dính ngay dưới. */
table.kh-table .kh-head-main th{height:30px;box-sizing:border-box;vertical-align:middle}
table.kh-table .kh-head-sub th{top:30px;height:26px;box-sizing:border-box;text-align:center;vertical-align:middle}
/* Cột đầu dính khi cuộn ngang */
table.kh-table .kh-sticky-col{position:sticky;left:0;z-index:10;background:var(--card-bg)}
table.kh-table th.kh-sticky-col{z-index:30;background:var(--dd-red)}
.kh-row-l1>td{font-weight:800;background:var(--dd-cream)}
.kh-row-l1>td.kh-sticky-col{background:var(--dd-cream)}
.kh-row-l2>td{font-weight:600}
.kh-row-l3{cursor:pointer}
.kh-row-l3:hover>td{background:var(--dd-red-light)}
.kh-row-l3:hover>td.kh-sticky-col{background:var(--dd-red-light)}
/* Tô nổi cột tháng hiện tại — tông đỏ/kem có sẵn, không tạo màu mới */
.kh-col-current{background:var(--dd-red-light) !important}
th.kh-col-current{background:var(--dd-red) !important}
/* Số phân bổ / còn lại: để cùng màu chữ với phần còn lại của bảng,
   đậm để tách khỏi cột tháng. KL Còn Lại < 0 → đỏ cảnh báo. */
.kh-num-r,.kh-num-cl{color:inherit;font-weight:700}
.kh-num-cl.kh-neg{color:var(--sev-critical)}

/* header cell có nút L1/L2/L3 */
.kh-th-ctrl{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kh-th-ctrl .kh-tree-controls .kh-btn{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);
}
.kh-th-ctrl .kh-tree-controls .kh-btn:hover{background:rgba(255,255,255,.28);border-color:#fff}
.kh-th-ctrl .kh-tree-controls .kh-btn.active{background:#fff;color:#374151;border-color:#fff}

/* Nút [+]/[−] */
.kh-tg-btn{
  display:inline-block;width:16px;text-align:center;cursor:pointer;user-select:none;
  color:var(--dd-red);font-weight:800;font-size:11px;
}
.kh-tg-btn.leaf{visibility:hidden}
.kh-indent-1{display:inline-block;width:18px}
.kh-indent-2{display:inline-block;width:38px}
.kh-name-l1{color:var(--dd-red-dark)}
.kh-name-l2{color:var(--text)}
.kh-name-l3{color:var(--text-muted)}
.kh-ma{color:var(--text-muted);font-weight:600}

.kh-warn{color:var(--sev-warning);font-weight:800;cursor:help}
.kh-s{font-size:9px;color:var(--text-muted);vertical-align:super;margin-left:1px}
.kh-empty{text-align:center;color:var(--text-muted);font-size:12px;padding:24px}
.kh-loading{text-align:center;color:var(--text-muted);font-size:12px;padding:24px}

/* ---------- Bảng tổng theo nhà máy ---------- */
/* Style đồng bộ với bảng cây — header đỏ --dd-red, dữ liệu trắng xen kẽ
   kem nhạt, viền xám nhạt, hover --dd-red-light. Dòng TỔNG CỘNG giống
   Grand Total ở ảnh 1 (nền xám trắng nhạt, đậm, viền trên dày). */
table.kh-sumtable{border-collapse:collapse;width:max-content;min-width:100%;font-size:11px;table-layout:auto}
table.kh-sumtable th{
  position:sticky;top:0;z-index:20;
  background:var(--dd-red);color:#fff;
  padding:6px 8px;font-weight:700;font-size:12px;
  text-align:left;border-right:1px solid rgba(255,255,255,.28);
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
}
table.kh-sumtable td{
  padding:5px 8px;border-bottom:1px solid var(--border);
  border-right:1px solid rgba(229,231,235,.85);background:var(--card-bg);
  color:var(--text,#1F2937);
}
table.kh-sumtable th:first-child,table.kh-sumtable td:first-child{width:50px;min-width:50px}
table.kh-sumtable th:nth-child(2),table.kh-sumtable td:nth-child(2){width:120px;min-width:120px}
table.kh-sumtable th:nth-child(3),table.kh-sumtable td:nth-child(3),
table.kh-sumtable th:nth-child(4),table.kh-sumtable td:nth-child(4){min-width:100px}
table.kh-sumtable th:nth-child(n+5),table.kh-sumtable td:nth-child(n+5){min-width:125px}
table.kh-sumtable .kh-plan-cell{white-space:nowrap}
table.kh-sumtable tr:nth-child(even)>td{background:var(--dd-cream-2)}
table.kh-sumtable tr:hover>td{background:var(--dd-red-light)}
table.kh-sumtable th.num,table.kh-sumtable td.num{text-align:right;font-variant-numeric:tabular-nums}
/* Dòng TỔNG CỘNG: giống Grand Total ảnh 1 — nền xám trắng nhạt, chữ đậm,
   viền trên dày 2px tách khỏi phần dữ liệu */
.kh-sumtable .kh-total>td{background:#F9FAFB !important;font-weight:800;border-top:2px solid #E5E7EB}
.kh-sumtable .kh-total>td.kh-sticky-col{background:#F9FAFB !important}
table.kh-sumtable .kh-sticky-col{position:sticky;left:0;z-index:10;background:var(--card-bg)}
table.kh-sumtable th.kh-sticky-col{z-index:30;background:var(--dd-red)}
/* Cột NHÀ MÁY dính ngay sau cột STT khi cuộn ngang. */
table.kh-sumtable th:nth-child(2).kh-sticky-col,
table.kh-sumtable td:nth-child(2).kh-sticky-col{left:50px}
.kh-export-btn{font-size:11px}

/* ---------- Modal nhập KL phát hành ---------- */
.kh-modal-info{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;
}
.kh-info-card{
  background:var(--dd-cream);padding:8px 10px;border-radius:6px;
  border-left:3px solid var(--dd-red);font-size:11px;
}
.kh-info-card .k{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.kh-info-card .v{font-weight:700;color:var(--text);margin-top:2px;word-break:break-word}
/* Dòng nhập mới + danh sách các lần đã nhập (nhóm theo tháng) */
.kh-lan-section{margin-top:12px}
.kh-lan-title{
  font-size:12px;font-weight:800;color:var(--dd-red);text-transform:uppercase;
  letter-spacing:.3px;padding-bottom:5px;margin-bottom:8px;border-bottom:2px solid var(--dd-red);
}
.kh-lan-new{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.kh-lan-new label{
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;font-weight:700;color:var(--text-muted);
}
.kh-lan-new input,.kh-lan-editing input{
  border:1px solid var(--border);border-radius:5px;padding:6px 8px;font-size:12px;
  font-variant-numeric:tabular-nums;
}
.kh-lan-new input[type=number]{width:170px;text-align:right}
.kh-lan-new input:focus,.kh-lan-editing input:focus{outline:2px solid var(--dd-yellow)}
.kh-lan-new .kh-btn{padding:7px 16px}
.kh-lan-wrap{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:6px}
table.kh-lan-table{border-collapse:collapse;width:100%;font-size:11px}
table.kh-lan-table th{
  position:sticky;top:0;z-index:2;background:var(--dd-red);color:#fff;
  padding:6px 8px;font-weight:700;text-align:left;white-space:nowrap;
}
table.kh-lan-table td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
table.kh-lan-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.kh-lan-table .center{text-align:center}
.kh-lan-month td{
  background:var(--dd-cream);color:var(--dd-red);font-weight:800;
  border-top:1px solid var(--dd-red-light);
}
.kh-lan-total td{font-weight:800;background:var(--dd-cream-2);border-bottom:2px solid var(--dd-red-light)}
.kh-lan-sum{font-weight:700}
.kh-lan-time{font-size:10px;color:var(--text-muted)}
.kh-lan-actions{white-space:nowrap}
.kh-lan-actions .kh-btn{font-size:10px;padding:3px 9px;margin:0 2px}
.kh-btn-danger{color:var(--dd-red);border-color:var(--dd-red)}
.kh-btn-danger:hover{background:var(--dd-red);color:#fff}
.kh-lan-editing td{background:var(--dd-red-light)}
.kh-lan-editing input[type=number]{width:100px;text-align:right}
.kh-lan-empty{
  font-size:12px;color:var(--text-muted);padding:14px;text-align:center;
  border:1px dashed var(--border);border-radius:6px;
}
.kh-pw-row{
  display:flex;align-items:center;gap:8px;margin:14px 0 8px;
  padding-top:12px;border-top:1px dashed var(--border);
}
.kh-pw-row label{font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.kh-pw-row input[type=password]{
  flex:1;max-width:260px;border:1px solid var(--border);border-radius:5px;
  padding:6px 8px;font-size:12px;
}
.kh-pw-row input[type=password]:focus{outline:2px solid var(--dd-yellow)}
.kh-modal-msg{font-size:11px;font-weight:700;min-height:15px;margin-top:6px}
.kh-modal-msg.ok{color:var(--sev-ok)}
.kh-modal-msg.err{color:var(--sev-critical)}