/* Trang quản trị /quan-tri (theo mockup/admin.html). Dùng thêm biến màu + nút / thẻ / hộp thoại chung trong style.css */

body.sys { height: auto; min-height: 100%; }
.sys-boot { max-width: 520px; margin: 18vh auto 0; padding: 0 20px; text-align: center; }
.sys-boot[hidden] { display: none; }
.sys .login { min-height: 100vh; }
.sys-lock { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 18px; background: #FFF1C2; }
.sys-lock .icon { width: 34px; height: 34px; }
.sys-note { margin-top: 12px; font-size: 13px; }
#pwView form .btn + .btn { margin-top: -4px; }

/* Khung: thanh bên + nội dung */
/* #app.qt: thắng quy tắc #app chung của màn chơi (team.css: flex dọc, cao 100%) */
#app.qt { display: grid; grid-template-columns: 228px minmax(0, 1fr); height: auto; min-height: 100vh; background: #fff; }
#app.qt[hidden] { display: none; }
.qt-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; height: 100vh; padding: 16px 12px; background: #FBFBFB; border-right: 2px solid var(--line); }
.qt-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; }
.qt-brand .icon { width: 30px; height: 30px; }
.qt-brand b { display: block; color: var(--green); font-size: 17px; font-weight: 900; line-height: 1.1; }
.qt-brand small { color: var(--muted); font-size: 12px; font-weight: 800; }
.qt-nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 800 15px var(--font); text-align: left; cursor: pointer; }
.qt-nav:hover { background: #F0F0F0; }
.qt-nav:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.qt-nav.on { background: #DDF4FF; color: var(--blue-dark); }
.qt-nav i { margin-left: auto; padding: 0 7px; border-radius: 999px; background: #E5E5E5; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 900; }
.qt-nav i:empty { display: none; }
.qt-grow { flex: 1; }
.qt-me { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-size: 13px; }
.qt-me b { font-size: 14px; }
.qt-me .btn-row { margin-top: 6px; }
.btn.sm { min-height: 30px; padding: 2px 10px; font-size: 13px; }
.qt-main { min-width: 0; }
.qt-main .conn { padding: 8px 22px; background: #FFE3E3; }
.qt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 22px; border-bottom: 2px solid var(--line); }
.qt-top h2 { font-size: 22px; font-weight: 900; }
.qt-top .sub { color: var(--muted); font-weight: 700; }
.qt-top .right { display: flex; gap: 8px; margin-left: auto; }
.qt-body { display: grid; gap: 16px; padding: 18px 22px 30px; }
.qt-sec { display: none; }
.qt-sec.on { display: block; }
.hint { margin: 0; font-size: 13px; }
.panel .hint { margin-top: 12px; }
.linkish { margin-left: auto; padding: 0; border: 0; background: none; color: var(--blue-dark); font: 800 13px var(--font); cursor: pointer; }

/* Số liệu */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.kpi .t { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 800; }
.kpi b { display: block; margin-top: 4px; font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-weight: 700; }
.kpi.good b { color: var(--green-dark); }
.panel { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 900; }
.panel.narrow { max-width: 640px; }

/* Lọc + bảng */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #F0F0F0; }
.seg button { padding: 5px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 800 14px var(--font); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 0 2px var(--line); }
.qt-input { min-width: 0; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #F7F7F7; color: var(--ink); font: 700 15px var(--font); }
.qt-input:focus { outline: none; border-color: var(--blue); background: #fff; }
.qt-input:disabled { opacity: .6; }
.qt-input.search { flex: 1 1 220px; }
.tbl-wrap { overflow: auto; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th { padding: 8px 10px; background: #FBFBFB; color: var(--muted); font-size: 12px; font-weight: 900; text-align: left; text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 2px solid #F2F2F2; font-weight: 700; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.dim td { color: var(--muted); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .mono, .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .5px; white-space: nowrap; }
.tbl .empty { padding: 22px 12px; text-align: center; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #F0F0F0; color: var(--muted); font-size: 12px; font-weight: 900; white-space: nowrap; vertical-align: 1px; }
td > .tag:first-child { margin-left: 0; }
.tag.run, .tag.ok { background: #D7FFB8; color: var(--green-dark); }
.tag.wait { background: #FFF1C2; color: #9A5B00; }
.tag.end, .tag.hide { background: #EEE; color: #888; }
.tag.solo { background: #F3E5FF; color: #8A3FC4; }
.tag.team { background: #DDF4FF; color: var(--blue-dark); }
.tag.priv { background: #FFE3E3; color: var(--red-dark); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.who .av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); color: #fff; font-size: 13px; font-weight: 900; flex: none; }
.who .ms { display: inline-grid; flex: none; }
.online { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.online.off { background: #CCC; }

/* Nhật ký */
.log { display: grid; }
.log div { display: grid; grid-template-columns: 130px 110px minmax(0, 1fr); gap: 10px; padding: 9px 4px; border-top: 2px solid #F2F2F2; font-size: 14px; font-weight: 700; }
.log div:first-child { border-top: 0; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hộp thoại + form */
.sys-dlg h2 { margin-bottom: 14px; font-size: 20px; font-weight: 900; }
.sys-dlg .dlg-actions { justify-content: flex-end; margin-top: 8px; }
.sys-dlg p { margin: 0 0 8px; }
.rf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.rf label, .rf-one { display: grid; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 900; }
.rf .full { grid-column: 1 / -1; }
.rf .lockn { color: #9A5B00; font-size: 12px; font-weight: 800; }
.chks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rf .chk { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 800; }
.chk input { width: 18px; height: 18px; accent-color: var(--green); }
.codes { display: grid; gap: 8px; }
.code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; background: #F7F7F7; font-weight: 800; }
.code .k { min-width: 110px; color: var(--muted); font-size: 13px; }
.code b { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: 1px; }
.code .btn, .code > .muted { margin-left: auto; }
.code > .muted { font-size: 12px; }
.sys .toast { position: fixed; z-index: 50; }

/* Tổng quan: việc cần xử lý */
.qt-nav i.warn { background: var(--red); color: #fff; }
.todo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 2px solid #F2F2F2; }
.todo:first-child { border-top: 0; padding-top: 0; }
.todo .dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--red); }
.todo .dot.y { background: var(--accent); }
.todo p { margin: 0; font-weight: 800; }
.todo small { color: var(--muted); font-weight: 700; }
.todo .btn { margin-left: auto; }
.kpi.warn b { color: var(--red); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* Câu hỏi */
.cov { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.cov button { display: grid; gap: 3px; padding: 7px 9px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); font: 800 12px var(--font); text-align: left; cursor: pointer; }
.cov button.on { background: #F2FBFF; box-shadow: inset 0 0 0 2px var(--blue); }
.cov .m { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #F0F0F0; }
.cov .m i { display: block; height: 100%; background: var(--green); }
.cov .m i.y { background: var(--accent); }
.cov small { color: var(--muted); }
.qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 16px; align-items: start; }
.qtbl { max-height: 70vh; }
.qtbl th { position: sticky; top: 0; z-index: 1; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: #FAFAFA; }
.tbl tr.sel td { background: #F2FBFF; }
.tbl td.lo { color: var(--red-dark); }
.tbl td.hi { color: var(--green-dark); }
.qtext { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 520px; }
.src { display: inline-flex; gap: 2px; }
.src i { width: 8px; height: 14px; border-radius: 3px; background: #E5E5E5; }
.src i.on { background: var(--green); }
.src.weak i.on { background: var(--accent); }
.src.none i { background: #FFD4D4; }
.editor { position: sticky; top: 12px; display: grid; gap: 10px; max-height: calc(100vh - 24px); overflow: auto; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.editor .hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.editor .hd b { font-size: 16px; }
.editor .hd small { flex-basis: 100%; }
.editor label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 900; }
.editor .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.editor select.qt-input { padding: 7px 8px; font-size: 14px; }
.qt-input.wide { width: 100%; resize: vertical; line-height: 1.45; }
.answers { display: grid; gap: 6px; }
.answers .lbl { color: var(--muted); font-size: 13px; font-weight: 900; }
.opt { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 6px; }
.opt input[type=radio] { width: 20px; height: 20px; accent-color: var(--green); }
.opt.right .qt-input { border-color: #A5E075; background: #F3FFE9; }
.checks { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #FBFBFB; font-size: 13px; font-weight: 800; }
.checks .ok { color: var(--green-dark); }
.checks .bad { color: var(--red-dark); }
.checks .mid { color: #9A5B00; }
.qstat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 13px; font-weight: 800; }
.qstat b { color: var(--ink); }
.suggest { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: #FFF1C2; color: #7A4A00; }

/* Hệ thống */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: 6px; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: #BDE6FA; }
.err { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 2px solid #F2F2F2; font-size: 13px; font-weight: 700; }
.err:first-child { border-top: 0; }
.err code { grid-column: 2; overflow-wrap: anywhere; color: var(--red-dark); }

/* Cài đặt */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 2px solid #F2F2F2; font-weight: 800; }
.panel h3 + .set-row, .panel .hint + .set-row { border-top: 0; }
.set-row small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.sw { position: relative; flex: none; width: 46px; height: 26px; margin: 0; border-radius: 13px; background: #DDD; cursor: pointer; appearance: none; transition: background .15s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.sw:checked { background: var(--green); }
.sw:checked::after { left: 23px; }
.sw:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag.word { gap: 4px; margin: 0; padding: 2px 4px 2px 10px; font-size: 13px; }
.tag.word button { padding: 0 6px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.tag.word button:hover { background: #E0E0E0; }

@media (max-width: 1150px) { .qs, .grid2 { grid-template-columns: 1fr; } .editor { position: static; max-height: none; } }

@media (max-width: 760px) {
  #app.qt { grid-template-columns: 1fr; }
  .qt-side { position: static; flex-direction: row; flex-wrap: wrap; height: auto; padding: 10px; border-right: 0; border-bottom: 2px solid var(--line); }
  .qt-brand, .qt-grow { display: none; }
  .qt-nav { width: auto; }
  .qt-me { flex-basis: 100%; }
  .qt-top, .qt-body { padding-left: 14px; padding-right: 14px; }
  .rf { grid-template-columns: 1fr; }
  .log div { grid-template-columns: 1fr; gap: 2px; }
}