/* Security (security-monitor.js): the Suricata detections page, the customer section and the drawer (the drawer reuses the Discovery drawer look from discovery.css). Foundation language: hairline rules, mono for values, status as words. Both themes via the shared tokens. */
.sm-scope{margin:6px 0 10px}
.sm-scope .sel{min-width:220px;max-width:100%}
.sm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin:6px 0 20px}
.sm-card{display:grid;gap:10px;align-content:start;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);padding:12px 14px;cursor:pointer;min-width:0}
.sm-card:hover{border-color:var(--ink3)}
.sm-card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.sm-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sm-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sm-id{display:grid;min-width:0}
.sm-id b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-sub{font-size:11.5px;color:var(--ink3)}
.sm-nums{display:grid;grid-template-columns:repeat(3,auto) minmax(90px,1fr);gap:4px 16px;align-items:end}
.sm-nums-e{grid-template-columns:repeat(4,auto) minmax(90px,1fr);margin:8px 0}
.sm-nums>div{display:grid;gap:0}
.sm-nums b{font-size:22px;font-weight:600;line-height:1.1}
.sm-nums .lbl{font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.sm-spark{width:100%;height:28px;justify-self:end;max-width:160px;color:var(--ink3)}
.sm-spark.c-warn{color:var(--warn)}
.sm-spark.c-crit{color:var(--crit)}
.sm-bva{display:flex;gap:10px;align-items:center;font-size:12px}
.sm-bar{flex:0 0 96px;height:6px;border-radius:3px;background:var(--bd2);overflow:hidden}
.sm-bar i{display:block;height:100%;background:var(--ok)}
.sm-tops{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12.5px}
.sm-tops li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--bd);padding-top:3px}
.sm-sig{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sm-lists{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-mini{display:grid;gap:1px;min-width:0}
.sm-ipb{background:none;border:0;padding:1px 0;text-align:left;color:inherit;font-size:12px;cursor:copy}
.sm-ipb:hover{color:var(--acc)}
.sm-none{margin:0;max-width:60ch}
.sm-card footer{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:8px;font-size:12px}
.sm-sw{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.sm-recent{margin-top:6px}
.sm-bar2{margin:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sm-seg{max-width:100%;overflow-x:auto}
.sm-q{min-width:260px}
.sm-t td.n{text-align:right}
.sm-row{cursor:pointer}
.sm-row:hover td{background:var(--sf2)}
.sm-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.sm-row.sm-hi td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
.sm-row.sm-exp{opacity:.7}
.sm-name .host{font-weight:500}
.sm-cp{background:none;border:0;padding:0;color:inherit;font-size:12px;text-align:left;text-decoration:underline dotted var(--bd2);text-underline-offset:3px;cursor:copy;overflow-wrap:anywhere}
.sm-cp:hover{color:var(--acc)}
.hub-sec-sm,.hub-sm{margin-top:18px}
.sm-embed{margin:0}
.sm-drawer .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:719px){
  .sm-cards{grid-template-columns:minmax(0,1fr)}
  .sm-q{min-width:0;width:100%}
  .sm-scope .sel{width:100%}
  .sm-nums,.sm-nums-e{grid-template-columns:repeat(3,auto)}
  .sm-nums .sm-spark{grid-column:1 / -1;max-width:none}
  .sm-card footer{flex-direction:column;align-items:flex-start}
  .sm-sw{min-height:44px}
  /* phone: each detection is a card (severity and signature first, the rest labelled by data-l) */
  .sm-t,.sm-t tbody,.sm-t tr,.sm-t td{display:block;width:auto!important;max-width:none!important;box-sizing:border-box}
  .sm-t colgroup,.sm-t thead,.sm-t .rz-handle,.sm-t .ua-grip{display:none!important}
  .sm-t tr{border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);margin:0 0 10px;padding:8px 12px;display:flex;flex-direction:column}
  .sm-t td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:4px 0;text-align:right;white-space:normal;min-width:0!important;background:none!important;box-shadow:none!important}
  .sm-t td::before{content:attr(data-l);color:var(--ink3);font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:left;flex:none}
  .sm-row.sm-hi{border-left:3px solid var(--crit)}
  .sm-row td.sm-name{order:-2;display:block;text-align:left;font-size:14px;padding-bottom:2px}
  .sm-row td.sm-name::before{content:none}
  .sm-row td:first-child{order:-1;justify-content:flex-start}
  .sm-t td[data-l="Customer or site"]{text-align:right}
  .sm-cp,.sm-ipb,.sm-row .btn{min-height:36px}
}