/* S04 Admin review (PO 07/11/2026): Quản trị pages in the IT-019 look. Tokens: --ux-* only (V3.3.2 / IT-019).
   Builds on s19-people.css (s19p-page, s19p-fc, s19p-dt, s19p-ml, s19p-cr). Not a chat file (FROZEN untouched). */

/* Filters that stay visible on phones (the people page hides its own on phones). */
.s19a-flt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#app-screen .s19a-flt .s19p-fc input[type="date"] { border: 0; outline: 0; background: transparent; color: var(--ux-text); font: inherit; font-size: 13px; font-weight: 600; height: 34px; padding: 0; min-width: 0; color-scheme: light dark; }
.s19a-flt .s3-chip { height: 32px; cursor: pointer; }
.s19a-flt .s3-chip.s19p-on { border-color: var(--ux-primary); background: var(--ux-sel); color: var(--ux-text); }

.s19a-dt td { vertical-align: top; }
.s19a-dt .s19a-nw, .s19a-nw { white-space: nowrap; }
.s19a-dt tr.wn td:first-child { box-shadow: inset 3px 0 0 var(--ux-warn); }
.s19a-dt details summary, .s19a-mr details summary { cursor: pointer; color: var(--ux-primary); }
.s19a-dt details p, .s19a-mr details p { margin: 6px 0 0; max-width: 420px; overflow-wrap: anywhere; color: var(--ux-text-2); }
.s19a-dt th.num, .s19a-dt td.num { text-align: right; font-variant-numeric: tabular-nums; }

.s19a-mr { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-bottom: 1px solid var(--ux-border); }
.s19a-mr:last-child { border-bottom: 0; }
.s19a-mr.wn { box-shadow: inset 3px 0 0 var(--ux-warn); }
.s19a-mr .row { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.s19a-more { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--ux-border); }

/* Tình trạng hệ thống: cards of facts. */
.s19a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.s19a-kv { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 6px 12px; font-size: 13px; color: var(--ux-text); }
.s19a-kv dt { color: var(--ux-muted); }
.s19a-kv dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.s19a-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }
.s19a-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ux-muted); }
.s19a-st.ok i { background: var(--ux-ok); }
.s19a-st.wn i { background: var(--ux-warn); }
.s19a-st.bad i { background: var(--ux-danger); }
.s19a-hint { margin: 8px 0 0; font-size: 12px; color: var(--ux-text-2); }

/* Quản trị landing: one card per area with what needs attention (no second copy of the side list). */
.s19a-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.s19a-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border: 1px solid var(--ux-border); border-radius: 12px; background: var(--ux-surface); color: var(--ux-text); cursor: pointer; font: inherit; min-width: 0; }
.s19a-tile:hover { border-color: var(--ux-primary); }
.s19a-tile:focus-visible { outline: 2px solid var(--ux-primary); outline-offset: 2px; }
.s19a-tile .h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.s19a-tile .h svg { width: 18px; height: 18px; flex: none; }
.s19a-tile .d { font-size: 12px; color: var(--ux-text-2); }

@media (max-width: 760px) {
  .s19a-flt { gap: 6px; }
  .s19a-flt .s19p-fc { flex: 1 1 140px; }
  .s19a-grid, .s19a-tiles { grid-template-columns: 1fr; }
  .s19a-kv { grid-template-columns: 1fr 1fr; }
}

/* The landing cards reuse .s19-adm-row (phone flow, A6l) — undo its list-row geometry. */
.s19-adm-row.s19a-tile { height: auto; width: auto; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--ux-border); border-radius: 12px; font-weight: 400; }
.s19-adm-row.s19a-tile:first-of-type { border-top: 1px solid var(--ux-border); }
.s19-adm-row.s19a-tile.on, .s19-adm-row.s19a-tile:hover { background: var(--ux-surface); border-color: var(--ux-primary); }
.s19a-tile [data-s19-adm-badge]:empty { display: none; }

.s19a-inc { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.s19a-alert.bad { border-color: var(--ux-danger); background: var(--ux-danger-soft); color: var(--ux-text); }
.s19a-grid .s19p-cb { display: flex; flex-direction: column; gap: 10px; }

/* F10: two-step sign-in (account menu dialog + login step). */
.s19a-2fa input { width: 100%; }
.s19a-2fa-steps { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.s19a-key { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: .04em; background: var(--ux-surface-2); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.s19a-codes { font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.7; background: var(--ux-surface-2); color: var(--ux-text); border: 1px solid var(--ux-border); border-radius: 8px; padding: 10px 14px; columns: 2; margin: 0; }
.login-box.login-2fa-on > label[for="login-username"], .login-box.login-2fa-on > #login-username,
.login-box.login-2fa-on > label[for="login-password"], .login-box.login-2fa-on > #login-password, .login-box.login-2fa-on > #login-btn { display: none; }
.login-2fa { display: flex; flex-direction: column; gap: 8px; }
.login-2fa[hidden] { display: none; }
.login-box .login-2fa #login-2fa-back { background: transparent; color: var(--ux-primary); box-shadow: none; border: 1px solid var(--ux-border-strong); margin-top: 0; }
.login-box .login-2fa #login-2fa-back:hover { transform: none; box-shadow: none; filter: none; background: var(--ux-hover); }

/* F9 (Admin review): the scan strip between the Vấn đề AI header and its columns sat against the rail. */
.s3-issues > [data-s3-strip]:not(.s3-note) { padding: 0 24px 8px; }
.s3-issues > .s3-note[data-s3-strip] { margin: 0 24px 8px; }
@media (max-width: 760px) { .s3-issues > [data-s3-strip]:not(.s3-note) { padding: 0 16px 8px; } .s3-issues > .s3-note[data-s3-strip] { margin: 0 16px 8px; } }

/* F9: Cấu hình AI — the right column is narrow: description on its own line, numbers never cut ("6000(" before). */
.s17-grid2 > :last-child .s17-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.s17-grid2 > :last-child .s17-row > :first-child { grid-column: 1 / -1; }
.s17-pair .s17-in { min-width: 96px; }

/* F9: Tài khoản Zalo / Phòng ban / Mạng công ty inside the IT-019 frame. */
.s19a-zalo .table-wrap { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.s19a-zalo .admin-zalo-row td { padding: 9px 10px; vertical-align: middle; }
.s19a-zalo .admin-zalo-row td.row-actions { white-space: nowrap; }
.s19a-zalo .admin-zalo-row td.row-actions .s3-btn + .s3-btn { margin-left: 6px; }
.s19a-zalo-flt .s19p-ip { flex: 1 1 260px; }
.s19a-depts .dept-list { border: 0; box-shadow: none; margin: 0; }
.s19a-net textarea.s17-in { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.s19a-net .s19p-cb { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) { .s19a-zalo .admin-zalo-row td.row-actions { white-space: normal; } }
/* admin.css styles every ".row-actions button" as a primary button: keep the IT-019 buttons in the Zalo list. */
.s19a-zalo .row-actions button.s3-btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ux-border-strong); background: var(--ux-surface); color: var(--ux-text); font-size: 13px; font-weight: 600; box-shadow: none; min-height: 0; }
.s19a-zalo .row-actions button.s3-btn:hover { background: var(--ux-hover); }
.s19a-zalo .row-actions button.s3-btn.p { background: var(--ux-primary); border-color: var(--ux-primary); color: var(--ux-on-primary); }

/* S04 T11 (IT-020 NZ10): "Hai mục đã gộp vào Nhân sự & Zalo" + people numbers on Tình trạng hệ thống. */
.s19a-merged .s19a-mrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ux-border); }
.s19a-merged .s19a-mrow:first-of-type { border-top: 0; }
.s19a-merged .s19a-mrow .s3-col { flex: 1; min-width: 0; gap: 2px; }
.s19a-merged .s19a-mrow b { color: var(--ux-text); font-size: 13.5px; }
.s19a-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 12px 14px; }
.s19a-stats > div { display: flex; flex-direction: column; gap: 4px; }
.s19a-stats b { font-size: 20px; font-weight: 700; color: var(--ux-text); }
.s19a-stats b.wn { color: var(--ux-warn); }
@media (max-width: 760px) { .s19a-merged .s19a-mrow { flex-wrap: wrap; } }