/* IT-019 — Việc tồn (V1–V4, V2) và Tổng quan Manager (T1–T3). Nguồn: S03F2/design/it019 (r19.css, C19, D19), PO D21–D25.
   Chỉ token --ux-*; không đụng vùng chat FROZEN: cột mới nằm ngoài .chat-panel, chỉ thay chỗ các cột phải khác. */

/* ---------------------------------------------------------------- cột phải (C19: 440 ở 1440/1366, toàn màn ở 390, chỉ 1 cột mở) */
#s19-tasks { width: 440px; flex: none; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--ux-surface); border-left: 1px solid var(--ux-border); overflow: hidden; }
#s19-tasks[hidden] { display: none; }
/* Một cột phải: các cột khác ẩn khi Việc tồn mở (s3-conv / info-panel dùng display !important ở IT-016, nên cần cùng mức). */
#app-screen[data-s19-open] #info-panel,
#app-screen[data-s19-open] .s3-conv,
#app-screen[data-s19-open] #work-insights { display: none !important; }
@media (max-width: 1100px) { #s19-tasks { width: 400px; } }
@media (max-width: 1000px) { #s19-tasks { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; box-shadow: var(--ux-shadow); } }
@media (max-width: 600px) { #s19-tasks { left: 0; width: auto; border-left: 0; box-shadow: none; } }

.s19-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ux-border); flex: none; }
.s19-hd h2 { font-size: 16px; line-height: 22px; font-weight: 700; }
.s19-flt { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ux-border); flex: none; }
.s19-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s19-chip { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--ux-border-strong); background: var(--ux-surface); color: var(--ux-text); font-weight: 600; font-size: 12.5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.s19-chip:hover { background: var(--ux-hover); }
.s19-chip.on { background: var(--ux-primary); border-color: var(--ux-primary); color: var(--ux-on-primary); }
.s19-chip.x { background: var(--ux-sel); border-color: var(--ux-primary); color: var(--ux-text); }
.s19-cks { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; color: var(--ux-text); }
.s19-cks input { width: 16px; height: 16px; margin: 0; accent-color: var(--ux-primary); }
.s19-bd { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.s19-gh { display: flex; align-items: center; padding: 2px; }
.s19-gh b { font-size: 12.5px; }

/* ---------------------------------------------------------------- thẻ việc (.tk) */
.s19-tk { background: var(--ux-surface); border: 1px solid var(--ux-border); border-left: 4px solid var(--ux-border-strong); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s19-tk.khan { border-left-color: var(--ux-danger); }
.s19-tk.gap { border-left-color: var(--ux-sev-high); }
.s19-tk.thuong { border-left-color: var(--ux-muted); }
.s19-tk.kt { border-left-color: var(--ux-ai); }
.s19-tk.done, .s19-tk.cancelled { opacity: .72; }
.s19-tk.paused { border-style: dashed; border-left-style: solid; }
.s19-tk.hl { border-color: var(--ux-primary); border-left-color: var(--ux-primary); }
.s19-tk .tt { font-weight: 650; font-size: 13.5px; line-height: 18px; overflow-wrap: anywhere; }
.s19-tk .dd { font-size: 12.5px; color: var(--ux-text-2); line-height: 17px; white-space: pre-line; overflow-wrap: anywhere; }
.s19-tk .cu { font-weight: 650; font-size: 12px; min-width: 0; }
.s19-who { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--ux-text-2); max-width: 45%; min-width: 0; }
.s19-av { width: 22px; height: 22px; border-radius: 11px; background: var(--ux-sel); color: var(--ux-primary); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; }
.s19-lv, .s19-st { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 750; white-space: nowrap; background: var(--ux-hover); color: var(--ux-text-2); }
.s19-lv.khan { background: var(--ux-danger-soft); color: var(--ux-danger); }
.s19-lv.gap { background: var(--ux-sev-high-soft); color: var(--ux-sev-high); }
.s19-lv.kt { background: var(--ux-ai-soft); color: var(--ux-ai); }
.s19-st { padding: 0 8px; }
.s19-st.waiting { background: var(--ux-ai-soft); color: var(--ux-ai); }
.s19-st.doing { background: var(--ux-primary); color: var(--ux-on-primary); }
.s19-st.paused { background: var(--ux-warn-soft); color: var(--ux-warn); }
.s19-st.done { background: var(--ux-surface); color: var(--ux-ok); box-shadow: inset 0 0 0 1px var(--ux-ok); } /* ok trên ok-soft = 4.49 < 4.5 */
.s19-st.cancelled { background: var(--ux-disabled-bg); color: var(--ux-muted); }
.s19-age { font-size: 11.5px; color: var(--ux-muted); }
.s19-age b { font-weight: 700; }
.s19-age.yellow { color: var(--ux-warn); }
.s19-age.red { color: var(--ux-danger); }
.s19-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.s19-ai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: var(--ux-ai-soft); }
.s19-ai span { font-size: 11.5px; color: var(--ux-ai); font-weight: 650; }
.s19-ai .s3-btn { height: 28px; }
.s19-rp { font-size: 11.5px; color: var(--ux-text-2); background: var(--ux-surface-2); border: 1px solid var(--ux-border); border-radius: 8px; padding: 6px 8px; }
.s19-ft { display: flex; align-items: center; gap: 8px; }
.s19-sb { height: 30px; border-radius: 15px; border: 1px solid var(--ux-border-strong); background: var(--ux-surface); color: var(--ux-text); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.s19-sb:hover { background: var(--ux-hover); }
.s19-sb.doing { background: var(--ux-primary); border-color: var(--ux-primary); color: var(--ux-on-primary); }
.s19-sb.paused { background: var(--ux-warn-soft); border-color: var(--ux-attn); color: var(--ux-warn); }
.s19-sb.done { background: var(--ux-surface); border-color: var(--ux-ok); color: var(--ux-ok); }
.s19-sb.waiting { background: var(--ux-ai-soft); border-color: var(--ux-ai); color: var(--ux-ai); }
.s19-sb.cancelled { background: var(--ux-disabled-bg); color: var(--ux-muted); }
.s19-sb[disabled] { cursor: default; }
.s19-kb { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ux-text-2); display: grid; place-items: center; flex: none; }
.s19-kb:hover, .s19-kb.on { background: var(--ux-hover); color: var(--ux-text); }
.s19-empty { border: 1px dashed var(--ux-border-strong); background: var(--ux-surface-2); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; color: var(--ux-text-2); font-size: 12.5px; padding: 20px 12px; }
.s19-empty b { color: var(--ux-text); font-size: 13px; }

/* ---------------------------------------------------------------- form tạo / sửa (V2) */
.s19-form { display: flex; flex-direction: column; gap: 12px; }
.s19-fl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.s19-fl > label, .s19-fl > .lb { font-size: 12px; font-weight: 650; color: var(--ux-text-2); }
.s19-fl :is(input, select, textarea) { width: 100%; min-width: 0; border: 1px solid var(--ux-border-strong); border-radius: 8px; background: var(--ux-input); color: var(--ux-text); font: inherit; font-size: 13px; }
.s19-fl :is(input, select) { height: 36px; padding: 0 10px; }
.s19-fl textarea { min-height: 88px; padding: 10px; line-height: 19px; resize: vertical; }
.s19-fl :is(input, select, textarea):focus { outline: 2px solid var(--ux-primary); outline-offset: 0; border-color: var(--ux-primary); }
.s19-fl .hint { font-size: 11.5px; color: var(--ux-muted); }
.s19-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s19-seg { align-self: flex-start; display: inline-flex; border: 1px solid var(--ux-border-strong); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.s19-seg button { height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--ux-border); background: var(--ux-surface); color: var(--ux-text); font-size: 12.5px; font-weight: 600; }
.s19-seg button:last-child { border-right: 0; }
.s19-seg button.on { background: var(--ux-sel); color: var(--ux-primary); font-weight: 700; }
.s19-err { font-size: 12px; color: var(--ux-danger); }
.s19-acts { display: flex; justify-content: flex-end; gap: 8px; }
.s19-dlg { width: min(400px, calc(100vw - 24px)); padding: 16px; gap: 12px; }
.s19-dlg h3 { font-size: 15px; font-weight: 700; }

/* ---------------------------------------------------------------- rail: "Việc tồn" + huy hiệu (V1) */
#shell-nav button[data-s19-rail] { position: relative; }
#shell-nav button[data-s19-rail][aria-pressed="true"],
#shell-nav button[data-s19-rail][aria-pressed="true"]:hover { background: var(--shell-rail-active-bg); color: var(--shell-rail-fg-strong); box-shadow: inset 3px 0 0 var(--shell-rail-fg-strong); }

/* ---------------------------------------------------------------- Tổng quan Manager (T1–T3, D23) */
@media (min-width: 1101px) { .s18-kds.s19-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1100px) { .s18-kds.s19-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s19-pt { overflow-x: auto; }
.s19-dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.s19-dt th { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ux-muted); background: var(--ux-surface-2); text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--ux-border); white-space: normal; line-height: 14px; vertical-align: bottom; min-width: 52px; }
.s19-dt td { padding: 7px 6px; border-bottom: 1px solid var(--ux-border); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s19-dt :is(th, td):first-child { text-align: left; }
.s19-dt td.nm { min-width: 140px; }
.s19-dt td.nm b { display: block; font-size: 13px; }
.s19-dt td.nm span { display: block; font-size: 11px; color: var(--ux-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.s19-dt td.z { color: var(--ux-muted); }
.s19-dt td.hl { background: var(--ux-warn-soft); font-weight: 700; }
.s19-dt tr.tot td { font-weight: 700; background: var(--ux-surface-2); }
.s19-dt td button { font: inherit; color: var(--ux-link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.s19-dt td button.z { color: var(--ux-muted); text-decoration: none; }
.s19-dt .sep { border-left: 1px solid var(--ux-border); }
.s19-wt { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; margin-left: 6px; background: var(--ux-warn-soft); color: var(--ux-warn); }
.s19-wt.red { background: var(--ux-danger-soft); color: var(--ux-danger); }
.s19-tip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; border: 1px solid var(--ux-border-strong); font-size: 11px; font-weight: 700; color: var(--ux-text-2); cursor: help; }
.s18-lst[data-s19-people] > .lh h3 { white-space: nowrap; }
@media (max-width: 700px) { .s18-lst[data-s19-people] > .lh > .s3-xs { display: none; } }

/* ---------------------------------------------------------------- S04 U3 (D27): ai đang xử lý vấn đề + lý do lên Admin */
.s19-hl { display: block; font-size: 11.5px; line-height: 15px; color: var(--ux-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.s19-hl.wn { color: var(--ux-warn); }
.s19-hl.ok { color: var(--ux-ok); }
.s19-hero-hl { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.s19-hero-hl > span { margin-top: 0; }
.s19-why { display: block; font-size: 11.5px; line-height: 15px; color: var(--ux-danger); font-weight: 650; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* "Khám phá hội thoại" beside the Việc tồn column: the same one-column layout the page uses at ≤ 1280 px. */
#app-screen[data-s19-open] .s3-disc { grid-template-columns: minmax(0, 1fr); }
#app-screen[data-s19-open] .s3-irow .acts { padding-left: 122px; }
#app-screen[data-s19-open] .s3-land .lc { width: 360px; }
@media (max-width: 700px) {
  .s18-main-list > .lh { flex-wrap: wrap; row-gap: 4px; }
  .s18-main-list > .lh h3 { white-space: nowrap; }
  .s18-main-list > .lh > .s3-xs { display: none; }
}

/* S04 D28: staff work in their own inbox; the legacy "Việc cần xử lý" column (old AI, merged into Việc tồn — D26) is
   not theirs. Its script hides it on refresh; this keeps the first paint clean too. */
body.role-user #work-insights { display: none !important; }

/* S04 D15: "Nháp" — the conversation has a draft (like Zalo / B). Outside the chat panel; tokens only. */
.s19d-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; background: var(--ux-sel); color: var(--ux-link); white-space: nowrap; flex: none; margin-right: 4px; }

/* PO 09/11/2026: Tổng quan Admin — the "Chưa rõ phòng" line is not a filter; the escalation rule sits above the list. */
.s19-nodept { cursor: default; }
.s19-nodept:hover { background: transparent; }
.s19-nodept .bar i { background: var(--ux-muted); }
.s19-uprule { border-bottom: 1px solid var(--ux-border); }

/* PO 09/11/2026: Nghiêm trọng · Cao · Trung bình are separate levels; each keeps the symbol + colour of its row chip. */
.s3-lvsy { font-size: 9px; letter-spacing: -1px; line-height: 1; }
.s3-lvsy.c { color: var(--ux-danger); font-size: 8px; }
.s3-lvsy.h { color: var(--ux-sev-high); }
.s3-lvsy.m { color: var(--ux-warn); }
.s3-chip.sh { background: var(--ux-sev-high-soft); color: var(--ux-sev-high); }
.s19-lvchips { display: inline-flex; gap: 4px; flex: none; }
.s19-lvchips .s3-chip { gap: 3px; }
/* Narrow columns (900 px, side panels): the row's where-line ends with "…" instead of running under the time. */
.s18-ir .m { max-width: 100%; }
.s18-main-list > .lh h3 { white-space: nowrap; }
@media (max-width: 1100px) { .s18-main-list > .lh { flex-wrap: wrap; row-gap: 2px; } }