/* IT-018 Tổng quan Admin / Manager. Ported from design/it018 r18.css onto the app tokens (--ux-*).
   Only new token: --ux-sev-high (Cao, orange-red), see ux-tokens.css. */

.s18 .s3-ph .s3-col h1 { margin: 0; }
.s18 [data-s3-body] { display: flex; flex-direction: column; gap: 12px; }
.s18 [data-s3-body] > * { flex: none; }
.s18-lvsel, .s18-mob, .s18-own { display: none; }
.s18-lvsel select { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 650; appearance: none; padding-right: 4px; }

/* severity: Cao is orange-red, distinct from Nghiêm trọng (D2) */
.s3-sev.h { background: var(--ux-sev-high-soft); color: var(--ux-sev-high); }

/* coverage line (C18: one line, accounts and conversations kept apart) */
.s18-cov { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--ux-border); background: var(--ux-surface); border-radius: 10px; padding: 5px 6px 5px 12px; max-width: 100%; }
.s18-cov .s3-btn { height: 28px; }

/* banners (X18) */
.s18-bn { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 17px; border: 1px solid var(--ux-border); background: var(--ux-surface-2); }
.s18-bn.w { background: var(--ux-warn-soft); border-color: var(--ux-attn); }
.s18-bn.d { background: var(--ux-danger-soft); border-color: var(--ux-danger); }
.s18-bn.a { background: var(--ux-ai-soft); border-color: var(--ux-ai); }
.s18-bn.o { background: var(--ux-ok-soft); border-color: var(--ux-ok); }
.s18-bn b { font-weight: 700; }
.s18-bn .s3-lnk { padding: 0; }
.s18-upd { display: flex; justify-content: center; }
.s18-upd .s3-btn { border-radius: 18px; }

.s18-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s18-filters > .s3-fc.scope { width: auto; min-width: 0; max-width: 360px; flex: none; height: 36px; }
[data-s18-covline] { display: flex; }

/* layout */
.s18-adm { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.s18-mgr { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; align-items: start; }

/* list card */
.s18-lst { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.s18-lst > .lh { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--ux-border); min-height: 44px; }
.s18-lst > .lh h3 { font-size: 14px; font-weight: 700; margin: 0; }
.s18-lst > .ft { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--ux-border); background: var(--ux-surface-2); }

/* hero (Điểm nóng chính) */
.s18-hero { border: 1px solid var(--ux-border); border-left: 4px solid var(--ux-danger); border-radius: 12px; background: var(--ux-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.s18-hero.h { border-left-color: var(--ux-sev-high); }
.s18-hero.m { border-left-color: var(--ux-attn); }
.s18-hero.ok { border-left-color: var(--ux-ok); }
.s18-hero .lbl { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ux-danger); }
.s18-hero.h .lbl { color: var(--ux-sev-high); }
.s18-hero.m .lbl { color: var(--ux-warn); }
.s18-hero.ok .lbl { color: var(--ux-ok); }
.s18-hero .ht { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0; }
.s18-hero .s3-btn { height: 34px; gap: 6px; }

/* issue row (.ir): level · body · right · ⋯ */
.s18-ir { display: grid; grid-template-columns: 104px minmax(0, 1fr) 118px 32px; gap: 12px; align-items: center; padding: 9px 10px 9px 14px; min-height: 54px; border-bottom: 1px solid var(--ux-border); position: relative; min-width: 0; transition: opacity .15s, background .15s; }
.s18-ir:last-child { border-bottom: 0; }
.s18-ir:hover { background: var(--ux-hover); }
.s18-ir.back { outline: 2px solid var(--ux-primary); outline-offset: -2px; }
.s18-ir.s18-going { opacity: 0; pointer-events: none; }
.s18-ir .s18-hit { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; z-index: 0; border-radius: 0; }
.s18-ir .s18-hit:focus-visible { outline: 3px solid var(--ux-primary); outline-offset: -3px; }
.s18-ir > :not(.s18-hit) { position: relative; z-index: 1; pointer-events: none; }
.s18-ir > .s18-kb { pointer-events: auto; }
.s18-ir .t { font-weight: 650; font-size: 13.5px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s18-ir .m { display: block; font-size: 11.5px; color: var(--ux-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s18-body { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; }
.s18-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: var(--ux-muted); }
.s18-ir.c { grid-template-columns: 96px minmax(0, 1fr) 70px 32px; }
.s18-kb { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ux-text-2); cursor: pointer; }
.s18-kb:hover, .s18-kb.on { background: var(--ux-sel); color: var(--ux-text); }
.s18-kb:focus-visible { outline: 3px solid var(--ux-primary); outline-offset: 1px; }
.s18-new { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ux-ai-soft); color: var(--ux-ai); font-size: 11px; font-weight: 700; }
.s18-ew { display: inline-flex; align-items: center; height: 18px; margin-top: 4px; padding: 0 7px; border-radius: 9px; border: 1px dashed var(--ux-attn); background: var(--ux-warn-soft); color: var(--ux-warn); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.s18-vf { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--ux-ok-soft); color: var(--ux-ok); font-size: 11px; font-weight: 700; }

/* ⋯ menu (fixed, outside the row) */
.s18-menu { position: fixed; z-index: 60; width: 196px; background: var(--ux-surface); border: 1px solid var(--ux-border-strong); border-radius: 10px; box-shadow: var(--ux-shadow); padding: 4px; display: flex; flex-direction: column; }
.s18-menu button { height: 38px; border: 0; background: transparent; border-radius: 7px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font: inherit; font-weight: 600; color: var(--ux-text); text-align: left; cursor: pointer; }
.s18-menu button:hover, .s18-menu button:focus-visible { background: var(--ux-hover); outline: none; }
.s18-menu.sheet { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.s18-menu.sheet button { height: 48px; }

/* departments */
.s18-dp { display: grid; grid-template-columns: 116px minmax(0, 1fr) 28px; gap: 10px; align-items: center; height: 38px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--ux-border); background: transparent; width: 100%; text-align: left; color: var(--ux-text); font: inherit; cursor: pointer; }
.s18-dp:last-child { border-bottom: 0; }
.s18-dp:hover, .s18-dp.on { background: var(--ux-hover); }
.s18-dp .bar { height: 8px; border-radius: 4px; background: var(--ux-hover); overflow: hidden; }
.s18-dp .bar i { display: block; height: 100%; background: var(--ux-primary); border-radius: 4px; }
.s18-dp b { text-align: right; }

/* toast (B18) */
.s18-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 14px; background: var(--ux-text); color: var(--ux-bg); border-radius: 10px; padding: 0 8px 0 16px; height: 44px; box-shadow: var(--ux-shadow); font-weight: 600; }
.s18-toast button { border: 0; background: transparent; color: inherit; text-decoration: underline; font: inherit; font-weight: 700; height: 32px; padding: 0 10px; border-radius: 6px; cursor: pointer; }

/* dismissed dialog */
.s18-dlg-wrap { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, .35); display: grid; place-items: center; padding: 16px; }
.s18-dlg { width: min(520px, 100%); max-height: 80vh; overflow: auto; background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 12px; box-shadow: var(--ux-shadow); }
.s18-dlg > .lh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ux-border); }
.s18-dlg h3 { margin: 0; font-size: 15px; }
.s18-drow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ux-border); }
.s18-cl2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Manager: three numbers */
.s18-kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s18-kd { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s18-kd .l { font-size: 12px; font-weight: 650; color: var(--ux-text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s18-kd .n { font-size: 30px; line-height: 36px; font-weight: 700; background: none; border: 0; padding: 0; text-align: left; color: var(--ux-text); cursor: pointer; align-self: flex-start; }
.s18-kd .n.ok { color: var(--ux-ok); }
.s18-kd .n.z { color: var(--ux-muted); }
.s18-kd .n2 { display: flex; align-items: flex-end; }
.s18-kd .n2 em { font-style: normal; font-size: 12px; color: var(--ux-muted); font-weight: 600; margin: 0 14px 7px 4px; }
.s18-kd .s { font-size: 11.5px; color: var(--ux-muted); }
.s18-kd .a { font-size: 12px; color: var(--ux-link); font-weight: 650; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; align-self: flex-start; }
.s18-nm { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px dashed var(--ux-ai); color: var(--ux-ai); background: var(--ux-ai-soft); font-size: 10.5px; font-weight: 750; white-space: nowrap; }

/* Manager: per account */
.s18-acc { display: grid; grid-template-columns: minmax(0, 1.2fr) 118px 120px 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 0 14px; min-height: 42px; border: 0; border-bottom: 1px solid var(--ux-border); background: transparent; width: 100%; text-align: left; color: var(--ux-text); font: inherit; cursor: pointer; }
button.s18-acc:hover { background: var(--ux-hover); }
.s18-acc:last-child { border-bottom: 0; }
.s18-acc.hd { cursor: default; white-space: nowrap; min-height: 30px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ux-muted); background: var(--ux-surface-2); }
.s18-acc .num { font-weight: 700; font-size: 14px; }
.s18-acc .num.z { color: var(--ux-muted); font-weight: 600; }
.s18-wt { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--ux-warn-soft); color: var(--ux-warn); font-size: 11px; font-weight: 700; white-space: nowrap; }
.s18-wt::before { content: "◔"; font-size: 11px; }

/* Manager: people (A→Z, collapsible) */
.s18-tg { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.s18-pp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s18-pc { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--ux-border); border-right: 1px solid var(--ux-border); background: transparent; text-align: left; min-width: 0; color: var(--ux-text); font: inherit; cursor: pointer; }
.s18-pc:hover { background: var(--ux-hover); }
.s18-pc .av { width: 28px; height: 28px; border-radius: 14px; background: var(--ux-ai-soft); color: var(--ux-ai); display: grid; place-items: center; font-size: 10.5px; font-weight: 750; flex: none; }

@media (max-width: 1200px) {
  .s18-adm { grid-template-columns: minmax(0, 1fr) 320px; }
  .s18-mgr { grid-template-columns: minmax(0, 1fr); }
  .s18-pp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .s18-adm, .s18-mgr { grid-template-columns: minmax(0, 1fr); }
  /* A3 order: hot spot, Tập trung ở đâu, list */
  .s18-adm > .s3-col:first-child { display: contents; }
  .s18-adm .s18-hero { order: 1; }
  .s18-adm .s18-side { order: 2; }
  .s18-adm .s18-main-list { order: 3; }
  .s18-adm .s18-side > .s18-lst:last-child { display: none; }
  .s3-dash.s18 .s3-filters > .s3-seg { display: inline-flex; }
  .s3-dash.s18 .s3-filters > .s3-seg[aria-label="Mức độ"] { display: none; }
  .s18-filters > .s18-lvsel { display: inline-flex; width: 100%; }
  .s18-filters > .s18-lvsel select { flex: 1; }
  .s18-ir { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "lv r kb" "body body kb"; gap: 6px 8px; }
  .s18-ir .s18-lv { grid-area: lv; }
  .s18-ir .s18-body { grid-area: body; }
  .s18-ir .s18-r { grid-area: r; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .s18-ir .s18-kb { grid-area: kb; width: 44px; height: 44px; }
  .s18-ir.c { grid-template-columns: auto minmax(0, 1fr) 44px; }
  /* M3: one card, one row per number */
  .s18-kds { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--ux-border); border-radius: 12px; overflow: hidden; background: var(--ux-surface); }
  .s18-kd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "s n"; border: 0; border-bottom: 1px solid var(--ux-border); border-radius: 0; padding: 10px 14px; }
  .s18-kd:last-child { border-bottom: 0; }
  .s18-kd .l { grid-area: l; }
  .s18-kd .s, .s18-kd > .a:first-of-type { grid-area: s; }
  .s18-kd > .n, .s18-kd > .n2 { grid-area: n; align-self: center; font-size: 26px; }
  .s18-kd .n2 .n { font-size: 26px; }
  .s18-kd > .a:last-child:not(:first-of-type) { display: none; }
  .s18-acc { grid-template-columns: minmax(0, 1fr) 44px 44px 44px; }
  .s18-acc > :nth-child(5) { display: none; }
  .s18-mob, .s18-own { display: inline-flex; }
  .s18-own { display: block; }
  .s18-desk { display: none; }
  .s18-mob .s18-wt { margin-left: 6px; }
  .s18-acc .s3-col > .s3-ell:first-child { white-space: normal; }
  .s18-acc.hd > :nth-child(3) { font-size: 0; }
  .s18-acc.hd > :nth-child(3)::after { content: "Đến"; font-size: 11px; }
  .s18-acc.hd > :nth-child(2) { font-size: 0; }
  .s18-acc.hd > :nth-child(2)::after { content: "Chờ"; font-size: 11px; }
  .s18-acc.hd > :nth-child(4) { font-size: 0; }
  .s18-acc.hd > :nth-child(4)::after { content: "Mở"; font-size: 11px; }
  .s18-pp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s18-kd { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .s18-toast { bottom: 76px; }
}

/* menu / dialog / toast live outside .s3: size their icons here */
.s18-menu svg, .s18-dlg svg, .s18-toast svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.s18-menu, .s18-dlg, .s18-toast { font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ux-text); }
.s18-toast { color: var(--ux-bg); }