/* =============================================================
   app-work.css — DỰ ÁN & CÔNG VIỆC mở rộng (views-work.js)
   Bộ lọc, bảng cây việc, Kanban, timer nổi, thẻ dự án, bảng giờ, hồ sơ in.
   Thiết kế ưu tiên điện thoại: mọi khối co được, Kanban cuộn ngang.
   ============================================================= */

/* ---------- Thanh lọc ---------- */
.wk-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.wk-filters select,.wk-filters input[type=text]{width:auto;min-width:130px;max-width:220px;padding:6px 8px;font-size:12.5px}
.wk-filters .wk-grow{flex:1;min-width:140px}
.wk-modes{display:inline-flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface)}
.wk-modes button{border:0;background:transparent;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--text-2)}
.wk-modes button.active{background:var(--brand);color:#fff;font-weight:650}
.wk-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:650;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text-2)}
.wk-chip.active{background:var(--brand-soft);border-color:var(--brand-2);color:var(--brand)}
.wk-chip.danger.active{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.wk-chip.warn.active{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.wk-chip .n{background:rgba(15,23,42,.08);border-radius:10px;padding:0 6px;font-size:11px}
.wk-chip.active .n{background:rgba(255,255,255,.6)}

/* ---------- Bảng cây việc ---------- */
table.data tr.wk-overdue td{background:#fff5f5}
table.data tr.wk-overdue td:first-child{box-shadow:inset 4px 0 0 var(--danger)}
table.data tr.wk-today td{background:#fffbeb}
table.data tr.wk-today td:first-child{box-shadow:inset 4px 0 0 #f59e0b}
table.data tr.wk-hold td{background:var(--surface-2);color:var(--text-2)}
table.data tr.wk-hold td:first-child{box-shadow:inset 4px 0 0 var(--muted)}
table.data tr.wk-done td{color:var(--muted)}
table.data tr.wk-done td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
table.data tr.wk-submitted td:first-child{box-shadow:inset 4px 0 0 var(--info)}
.wk-title{display:flex;align-items:flex-start;gap:6px;min-width:200px}
.wk-title .tw{cursor:pointer}
.wk-title .tw:hover{color:var(--brand);text-decoration:underline}
.wk-indent{display:inline-block;width:18px;flex:none;color:var(--muted);text-align:right;font-size:11px}
.wk-code{font-size:11px;color:var(--muted);font-weight:700;font-family:var(--mono)}
.wk-sub{font-size:11px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:6px}
.wk-due{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.wk-due.late{background:var(--danger);color:#fff}
.wk-due.today{background:#f59e0b;color:#fff}
.wk-due.soon{background:var(--warn-soft);color:var(--warn)}
.wk-due.ok{background:var(--surface-2);color:var(--text-2)}
.wk-due.done{background:var(--ok-soft);color:var(--ok)}
.wk-pri{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.wk-pri.high{background:var(--danger)}.wk-pri.normal{background:var(--brand-2)}.wk-pri.low{background:var(--muted)}

/* Thanh giờ: dự kiến vs thực tế */
.wk-hours{min-width:110px}
.wk-hours .hb{position:relative;height:7px;border-radius:4px;background:var(--brand-soft);overflow:hidden;margin-top:3px}
.wk-hours .hb i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);border-radius:4px}
.wk-hours .hb i.warn{background:var(--warn)}.wk-hours .hb i.over{background:var(--danger)}
.wk-hours .ht{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk-hours .ht b.over{color:var(--danger)}

/* Thanh tiến độ việc con */
.wk-prog{display:flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap}
.wk-prog .pb{width:60px;height:6px;border-radius:3px;background:var(--brand-soft);overflow:hidden}
.wk-prog .pb i{display:block;height:100%;background:var(--brand-2)}

/* ---------- Kanban ---------- */
.wk-kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.wk-col{flex:0 0 272px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px;max-height:72vh;overflow:auto}
.wk-col h4{margin:0 0 8px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.wk-col h4 .n{font-size:11px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0 7px}
.wk-col.c-hold{border-top:3px solid var(--muted)}.wk-col.c-doing{border-top:3px solid var(--brand)}
.wk-col.c-assigned{border-top:3px solid var(--warn)}.wk-col.c-submitted{border-top:3px solid var(--info)}.wk-col.c-done{border-top:3px solid var(--ok)}
.wk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.wk-card:hover{border-color:var(--brand-2)}
.wk-card.late{border-left:3px solid var(--danger)}
.wk-card .t{font-size:13px;font-weight:600;margin:2px 0}
.wk-card .m{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---------- Chi tiết việc (hộp thoại) ---------- */
.wk-detail .grid{gap:8px}
.wk-field{background:var(--surface-2);border-radius:8px;padding:7px 10px}
.wk-field b{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.wk-field span{font-size:13px}
.wk-section{margin-top:14px}
.wk-section h4{margin:0 0 6px;font-size:13px;color:var(--brand);display:flex;align-items:center;justify-content:space-between;gap:8px}
.wk-hist{font-size:12px;border-left:3px solid var(--border);padding-left:10px;margin:4px 0}
.wk-hist b{color:var(--text)}
.wk-hist .dim{display:block}
.wk-req{background:var(--warn-soft);border:1px solid #fde68a;border-radius:8px;padding:8px 10px;font-size:12.5px}
.wk-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ---------- Timer nổi ---------- */
#wk-timer-pill{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--brand);color:#fff;border-radius:30px;padding:8px 14px 8px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(29,78,216,.35);font-size:13px;max-width:calc(100vw - 32px)}
#wk-timer-pill .dot{width:9px;height:9px;border-radius:50%;background:#fca5a5;animation:wkBlink 1.2s infinite}
#wk-timer-pill .el{font-family:var(--mono);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
#wk-timer-pill .nm{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
#wk-timer-pill button{border:0;background:#fff;color:var(--brand);border-radius:16px;padding:4px 10px;font-weight:700;cursor:pointer;font-size:12px}
@keyframes wkBlink{0%,100%{opacity:1}50%{opacity:.3}}
body.co-modal #wk-timer-pill{display:none}

/* ---------- Thẻ dự án ---------- */
.wk-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.wk-proj{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;cursor:pointer;border-top:4px solid var(--brand-2);transition:transform .12s}
.wk-proj:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.wk-proj.s-on_hold{border-top-color:var(--warn)}.wk-proj.s-done{border-top-color:var(--ok);opacity:.85}.wk-proj.s-cancelled{border-top-color:var(--muted);opacity:.7}.wk-proj.s-planning{border-top-color:var(--muted)}
.wk-proj .ph{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.wk-proj .pc{font-size:11px;color:var(--muted);font-weight:700;font-family:var(--mono)}
.wk-proj .pn{font-size:14.5px;font-weight:700;margin:2px 0 6px}
.wk-proj .pm{font-size:12px;color:var(--text-2)}
.wk-proj .bar{height:8px;border-radius:4px;background:var(--brand-soft);overflow:hidden;margin:8px 0 4px}
.wk-proj .bar i{display:block;height:100%;background:var(--ok)}
.wk-proj .st{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--text-2);margin-top:6px}
.wk-proj .st b{color:var(--text)}
.wk-proj .st .bad{color:var(--danger);font-weight:700}
.wk-avs{display:flex;margin-top:8px}
.wk-av{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);margin-left:-6px}
.wk-av:first-child{margin-left:0}

/* Mốc / sprint */
.wk-ms{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px}
.wk-ms .m{flex:0 0 150px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface);font-size:12px}
.wk-ms .m.done{background:var(--ok-soft);border-color:#a7f3d0}.wk-ms .m.late{background:var(--danger-soft);border-color:#fecaca}.wk-ms .m.doing{box-shadow:0 0 0 2px var(--brand-2) inset}
.wk-ms .m b{display:block;font-size:12.5px}

/* ---------- Bảng giờ tuần ---------- */
.wk-week{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wk-daytot{font-size:11px;color:var(--muted)}
.wk-timerbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--brand-soft);border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;margin-bottom:12px}
.wk-timerbox .big{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.wk-timerbox select{width:auto;max-width:320px}

/* ---------- Bảng điều hành ---------- */
.wk-heat{display:inline-block;min-width:34px;text-align:center;padding:2px 6px;border-radius:6px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.wk-heat.g0{background:var(--surface-2);color:var(--muted)}.wk-heat.g1{background:var(--ok-soft);color:var(--ok)}.wk-heat.g2{background:var(--warn-soft);color:var(--warn)}.wk-heat.g3{background:var(--danger-soft);color:var(--danger)}

/* ---------- Hồ sơ bằng chứng (in A4) ---------- */
.wk-evid h3{margin:14px 0 6px;font-size:14px}
.wk-evid .sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.wk-evid .sum div{border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.wk-evid .sum b{display:block;font-size:20px}
.wk-evid .sum small{color:var(--muted)}

@media (max-width:760px){
  .wk-filters select,.wk-filters input[type=text]{min-width:0;flex:1 1 44%;max-width:none}
  .wk-col{flex-basis:240px}
  #wk-timer-pill{right:10px;bottom:10px;padding:6px 10px}
  #wk-timer-pill .nm{max-width:120px}
  .wk-projects{grid-template-columns:1fr}
  .wk-title{min-width:160px}
}

/* Thẻ KPI trên điện thoại: 2 cột, gọn hơn (app.css mặc định xếp 1 cột) */
@media (max-width:900px){
  .wk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .wk-kpis .kpi{padding:10px 12px}
  .wk-kpis .k-value{font-size:22px}
}

/* ---------- Quy trình SOP (views-sop.js) ---------- */
.sop-steps{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px}
.sop-step{display:inline-block;padding:3px 9px;border-radius:8px;font-size:11.5px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);line-height:1.3}
.sop-step.ok{background:var(--ok-soft);border-color:#a7f3d0;color:var(--ok)}
.sop-step.now{background:var(--warn-soft);border-color:#fde68a;color:var(--warn);font-weight:700}
.sop-step.danger{background:var(--danger-soft);border-color:#fecaca;color:var(--danger)}
.sop-arrow{color:var(--muted);font-size:12px}

/* ---------- Nút xuất tệp ---------- */
.wk-export{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.wk-export .btn{padding:4px 9px;font-size:12px}

/* ---------- Bảng KPI ---------- */
.wk-rank{display:inline-block;width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px;font-weight:800;font-size:12px;color:#fff}
.wk-rank.A{background:var(--ok)}.wk-rank.B{background:var(--brand-2)}.wk-rank.C{background:#f59e0b}.wk-rank.D{background:var(--danger)}.wk-rank.none{background:var(--muted)}
.wk-score{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.wk-policy{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

/* =============================================================
   BIỂU ĐỒ & GANTT (views-work-viz.js) + bố cục gọn cho phân hệ công việc
   ============================================================= */
/* Bố cục gọn: khung, bảng, thẻ KPI sát hơn trong các màn .wk */
.wk .card{margin-bottom:8px}
.wk .card-head{padding:7px 12px}
.wk .card-head h3{font-size:13px}
.wk .card-body{padding:10px 12px}
.wk .card-body.flush{padding:0}
.wk table.data th{padding:6px 8px;font-size:10.5px}
.wk table.data td{padding:5px 8px;font-size:12.5px}
.wk .grid{gap:8px}
.wk .kpi{padding:8px 12px 8px}
.wk .kpi .k-value{font-size:21px;line-height:1.15}
.wk .kpi .k-label{font-size:10.5px}
.wk .kpi .k-sub{font-size:11px}
.wk .wk-filters{margin-bottom:8px;gap:6px}
.wk .wk-kanban{gap:8px}
.wk .wk-col{padding:8px}
.wk .wk-card{padding:6px 8px;margin-bottom:6px}
.wk .tabs{margin-bottom:8px}
.wk .wk-projects{gap:8px}
.wk .wk-proj{padding:10px 12px}
.wk .row[style*="margin-bottom:12px"],.wk .row[style*="margin-bottom:10px"]{margin-bottom:8px!important}
.wk .grid[style*="margin-bottom:12px"],.wk .grid[style*="margin-bottom:14px"]{margin-bottom:8px!important}
.wk .empty-state{padding:18px 12px}
.wk .asg-notes{margin:4px 0 0;padding:4px 8px}

/* Hàng biểu đồ */
.wkz-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin-bottom:8px}
.wkz-row .card{margin:0;height:100%}
.wkz-donut{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wkz-legend{display:flex;flex-direction:column;gap:3px;flex:1;min-width:120px}
.wkz-legend.small{flex-direction:row;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.wkz-li{display:flex;align-items:center;gap:6px;font-size:12px;cursor:default}
.wkz-li i{width:10px;height:10px;border-radius:3px;flex:none;display:inline-block}
.wkz-li .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.wkz-li b{font-variant-numeric:tabular-nums}
.wkz-li small{color:var(--muted);width:32px;text-align:right}
.wkz-li[data-wk],.wkz-li[data-pid],.wkz-li[data-status]{cursor:pointer}
.wkz-li[data-status]:hover .n{color:var(--brand)}
.wkz-hbars,.wkz-stack{display:flex;flex-direction:column;gap:5px}
.wkz-hb{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:8px;align-items:center;font-size:12px}
.wkz-hb[data-pid],.wkz-hb[data-ev],.wkz-hb[data-wk]{cursor:pointer}
.wkz-hb:hover .l{color:var(--brand)}
.wkz-hb .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;color:var(--text-2)}
.wkz-hb .l i{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.wkz-hb .t{position:relative;height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.wkz-hb .t .b1{position:absolute;left:0;top:0;bottom:0;border-radius:6px;opacity:.35}
.wkz-hb .t .b2{position:absolute;left:0;top:3px;bottom:3px;border-radius:4px}
.wkz-hb .t.s{display:flex}
.wkz-hb .t.s div{height:100%}
.wkz-hb .v{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.wkz-hb .v b.neg{color:var(--danger)}

/* Gantt */
.wkz-gantt{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.wkz-gl{flex:0 0 220px;border-right:1px solid var(--border);background:var(--surface);z-index:1}
.wkz-glh{height:34px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);border-bottom:1px solid var(--border);background:var(--surface-2)}
.wkz-glr{display:flex;align-items:center;gap:6px;border-bottom:1px solid #f1f5f9;font-size:12px;padding-right:8px;overflow:hidden;cursor:pointer}
.wkz-glr:hover{background:var(--brand-soft)}
.wkz-glr i{width:9px;height:9px;border-radius:50%;flex:none}
.wkz-glr .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.wkz-glr .n.b{font-weight:700}
.wkz-glr small{color:var(--muted);font-size:10.5px;white-space:nowrap}
.wkz-gr{flex:1;overflow-x:auto;overflow-y:hidden}
@media (max-width:760px){
  .wkz-gl{flex-basis:140px}
  .wkz-hb{grid-template-columns:minmax(70px,40%) 1fr auto}
  .wk .kpi .k-value{font-size:18px}
}

/* Nhãn dự án tô màu */
.wk-pbadge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.02em}
.wk-pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}