/* Cài đặt › Nhật ký hệ thống (frontend/system-event-log.js). Theo mockup đã chốt 2026-10-09; dùng token BMS và primitive dùng chung. */
.sl{display:grid;gap:14px;min-width:0;font-family:var(--bms-font-ui)}
.sl-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0}
.sl-bar .bms-search{--bms-search-width:100%;flex:1 1 320px;min-width:200px}
.sl-seg{display:inline-flex;flex:0 0 auto;height:48px;padding:4px;border:1px solid var(--bms-border);border-radius:999px;background:var(--bms-primary-soft);gap:2px}
.sl-seg button{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--bms-text-muted);font:600 13px var(--bms-font-ui);cursor:pointer;white-space:nowrap}
.sl-seg button[aria-pressed="true"]{background:var(--bms-surface);color:var(--bms-primary);box-shadow:var(--bms-shadow-1)}
.sl .btn.sl-pill{box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;height:48px;min-height:48px;padding:0 20px;border-radius:9999px;font-size:14.5px;line-height:1;white-space:nowrap}
.sl .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sl-dlwrap{position:relative;flex:0 0 auto}
.sl-dlpop{position:absolute;top:56px;right:0;z-index:40;width:420px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 16px;border:1px solid var(--bms-border);border-radius:14px;background:var(--bms-surface);box-shadow:var(--bms-shadow-3,0 12px 32px rgba(15,23,42,.16))}
.sl-dlpop h4{margin:0 0 10px;font-size:14px;color:var(--bms-text)}
.sl-dlpop .sl-note{margin:8px 0 10px}
/* Bộ lọc trong popover Lọc và ô ngày trong popover tải */
.sl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;min-width:420px;padding:4px 2px}
.sl-fields--two{min-width:0}
.sl-fields label{display:grid;gap:4px;min-width:0;font-size:12px;font-weight:700;color:var(--bms-text-muted)}
.sl-fields input,.sl-fields select{width:100%;min-width:0;box-sizing:border-box;height:40px;padding:0 10px;border:1px solid var(--bms-border);border-radius:10px;background:var(--bms-surface);color:var(--bms-text);font:14px var(--bms-font-ui)}
.sl-span{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.sl-span .btn{min-height:38px;border-radius:999px;padding:0 16px}
/* KPI */
.sl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sl-kpi{position:relative;padding:12px 16px;border:1px solid var(--bms-border);border-radius:12px;background:var(--bms-surface-subtle)}
.sl-kpi span{display:block;font-size:12px;color:var(--bms-text-muted)}
.sl-kpi strong{display:block;margin-top:2px;font-size:20px;color:var(--bms-text);font-variant-numeric:tabular-nums}
.sl-kpi small{display:block;margin-top:2px;font-size:12px;color:var(--bms-text-muted)}
.sl-kpi.warn strong{color:var(--bms-warning)}
.sl-badge{position:absolute!important;top:-8px;right:-8px;display:inline-flex!important;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bms-danger);color:#fff!important;font-size:11.5px!important;font-weight:800;box-shadow:0 0 0 2px var(--bms-surface)}
/* Bảng */
.sl-table-wrap{border:1px solid var(--bms-border);border-radius:12px;overflow:auto;background:var(--bms-surface);max-height:640px}
.sl-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:980px}
.sl-table th{position:sticky;top:0;z-index:1;padding:10px 12px;text-align:left;font:700 11.5px var(--bms-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--bms-text-muted);background:var(--bms-surface-subtle);border-bottom:1px solid var(--bms-border);white-space:nowrap}
.sl-table td{padding:10px 12px;border-bottom:1px solid var(--bms-border);vertical-align:middle;color:var(--bms-text)}
.sl-table tbody tr{cursor:pointer}
.sl-table tbody tr:hover td{background:var(--bms-surface-subtle)}
.sl-table tbody tr.is-open td{background:var(--bms-primary-soft)}
.sl-table tbody tr:focus-visible{outline:2px solid var(--bms-primary);outline-offset:-2px}
.sl-time{white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-time small{display:block;color:var(--bms-text-muted);font-size:12px}
.sl-user{display:flex;align-items:center;gap:8px;white-space:nowrap}
.sl-user small{display:block;color:var(--bms-text-muted);font-size:12px;font-weight:400}
.sl-avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:#fff;flex:none}
.sl-mod{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--bms-neutral-soft);color:var(--bms-neutral);white-space:nowrap}
.sl-mod.auth{background:#EDE9FE;color:#6D28D9}.sl-mod.srm{background:var(--bms-warning-soft);color:var(--bms-warning)}.sl-mod.kho{background:var(--bms-success-soft);color:var(--bms-success)}
.sl-mod.ifm{background:var(--bms-primary-soft);color:var(--bms-primary)}.sl-mod.admin{background:var(--bms-danger-soft);color:var(--bms-danger)}.sl-mod.duan{background:var(--bms-info-soft);color:var(--bms-info)}
.sl-mod.hrm{background:#FCE7F3;color:#BE185D}.sl-mod.crm{background:#E0F2FE;color:#0369A1}.sl-mod.sx{background:#FEF3C7;color:#92400E}
.sl-code{font-family:var(--bms-font-data,ui-monospace,monospace);font-size:12.5px;color:var(--bms-primary);word-break:break-all}
.sl-res{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600;font-size:12.5px}
.sl-res b{width:8px;height:8px;border-radius:50%;background:var(--bms-success);display:inline-block}
.sl-res.err{color:var(--bms-danger)}.sl-res.err b{background:var(--bms-danger)}
.sl-res.deny{color:var(--bms-warning)}.sl-res.deny b{background:var(--bms-warning)}
.sl-dev{color:var(--bms-text-muted);font-size:12.5px;white-space:nowrap}
.sl-empty{padding:40px 16px;text-align:center;color:var(--bms-text-muted)}
.sl-error{color:var(--bms-danger)}
.sl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;color:var(--bms-text-muted);font-size:12.5px}
.sl-foot-tools{display:inline-flex;align-items:center;gap:10px}
.sl-landscape{display:none}
.sl-pager{display:inline-flex;gap:4px}
.sl-pager button{height:34px;min-width:34px;padding:0 10px;border:1px solid var(--bms-border);border-radius:999px;background:var(--bms-surface);color:var(--bms-text);font:600 13px var(--bms-font-ui);cursor:pointer}
.sl-pager button[aria-current="page"]{background:var(--bms-primary);color:var(--bms-surface);border-color:var(--bms-primary)}
.sl-pager button:disabled{opacity:.4;cursor:default}
.sl-note{margin:0;color:var(--bms-text-muted);font-size:12.5px;line-height:1.5}
/* Thẻ lưu trữ */
.sl-keep-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;align-items:start}
.sl-keep h3{margin:0 0 4px;font-size:15px;color:var(--bms-text)}
.sl-keep p{margin:0;color:var(--bms-text-muted);font-size:13px;line-height:1.5}
.sl-keep select{height:40px;margin-top:8px;padding:0 10px;border:1px solid var(--bms-border);border-radius:10px;background:var(--bms-surface);color:var(--bms-text);font:14px var(--bms-font-ui)}
.sl-steps{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;color:var(--bms-text)}
.sl-steps li::before{content:"•";color:var(--bms-primary);margin-right:6px}
.sl-archives{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px;max-height:180px;overflow:auto}
.sl-archives li{display:flex;align-items:center;gap:10px;font-size:13px}
.sl-archives li span{font-weight:700;color:var(--bms-text)}
.sl-archives li small{color:var(--bms-text-muted);flex:1}
.sl-archives .btn{min-height:32px;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.sl-archives .btn svg{width:14px;height:14px}
/* Ngăn chi tiết */
.sl-drawer{position:fixed;inset:0;z-index:1200;display:none}
.sl-drawer.open{display:block}
.sl-dim{position:absolute;inset:0;background:rgba(15,23,42,.35)}
.sl-sheet{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bms-surface);color:var(--bms-text);box-shadow:-8px 0 30px rgba(15,23,42,.18);display:flex;flex-direction:column;font-family:var(--bms-font-ui)}
.sl-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--bms-border)}
.sl-sheet header h3{margin:0;font-size:17px}
.sl-sheet header p{margin:4px 0 0;color:var(--bms-text-muted);font-size:13px}
.sl-x{width:36px;height:36px;border:1px solid var(--bms-border);border-radius:50%;background:var(--bms-surface);color:var(--bms-text);font-size:18px;cursor:pointer;flex:none}
.sl-body{flex:1;overflow:auto;padding:14px 20px 20px;display:grid;gap:14px;align-content:start}
.sl-say{margin:0;padding:12px 14px;border-radius:10px;background:var(--bms-primary-soft);color:var(--bms-text);font-size:14px;line-height:1.5}
.sl-dl{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;margin:0;font-size:13.5px}
.sl-dl dt{color:var(--bms-text-muted)}.sl-dl dd{margin:0;min-width:0;word-break:break-word}
.sl-h4,.sl-diff h4,.sl-json h4{margin:0 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bms-text-muted)}
.sl-change{display:grid;gap:6px}
.sl-change-head{display:flex;gap:8px;flex-wrap:wrap}
.sl-diff{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sl-diff pre,.sl-json pre{margin:0;padding:10px;border:1px solid var(--bms-border);border-radius:8px;background:var(--bms-surface-subtle);font:12px/1.5 var(--bms-font-data,ui-monospace,monospace);white-space:pre-wrap;word-break:break-word;color:var(--bms-text);max-height:260px;overflow:auto}
.sl-json .btn{margin-top:8px;min-height:36px;border-radius:999px;padding:0 14px}
/* Điện thoại */
@media (max-width:720px){
  .sl-bar{flex-wrap:wrap}
  .sl-bar .bms-search{flex:1 1 100%;order:-1}
  .sl-seg{flex:1 1 100%;justify-content:space-between}
  .sl-seg button{flex:1;justify-content:center;padding:0 6px}
  .sl-dlwrap,.sl .btn.sl-pill[data-sl-dl="xlsx"]{flex:1 1 calc(50% - 5px)}
  .sl-dlwrap .btn.sl-pill{width:100%}
  .sl-dlpop{position:fixed;left:12px;right:12px;top:auto;bottom:16px;width:auto}
  .sl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-badge{right:6px}
  .sl-table{min-width:0}
  .sl-table th:nth-child(n+4),.sl-table td:nth-child(n+4){display:none}
  .sl-table td{padding:10px 8px}
  .sl-summary{white-space:normal}
  .sl-user{white-space:normal}
  .sl-table-wrap.is-expanded .sl-table{min-width:980px}
  .sl-table-wrap.is-expanded th,.sl-table-wrap.is-expanded td{display:table-cell}
  .sl-landscape{display:inline-flex;align-items:center;gap:6px;height:36px;min-height:36px;padding:0 12px;border-radius:999px;font-size:12.5px}
  .sl-keep-grid{grid-template-columns:1fr}
  .sl-fields{grid-template-columns:1fr;min-width:0}
  .sl-dl{grid-template-columns:1fr}
  .sl-diff{grid-template-columns:1fr}
}