/* Vuli web UI - the row menu (vertical three dots) and the delete dialog (DECISIONS #194).
   What: the trailing cell of an application row (the Applications list) and of a scan row (the
   scans tables), the menu that opens from it, and the parts of the delete dialog. Built from
   the existing tokens and the project menu's look (style-accounts.css .menu), the destructive
   colour is the existing --risky. The menu is placed with fixed coordinates by delete-view.js,
   so a table's scrolling or a list's rounded clipping never cuts it off. */

.rowmenu{display:flex;justify-content:flex-end}
.rm-btn{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.rm-btn:hover,.rm-btn[aria-expanded="true"]{background:var(--ctl-hover);color:var(--text)}
.rm-btn:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.rm-btn svg{width:18px;height:18px}
.rm-menu{position:fixed;z-index:50;min-width:150px;background:var(--menu-bg);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 12px 30px rgba(16,32,72,.16);padding:6px}
.rm-menu[hidden]{display:none}
.rm-menu [role="menuitem"]{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;color:var(--risky);font-weight:650}
.rm-menu [role="menuitem"]:hover,.rm-menu [role="menuitem"]:focus-visible{background:var(--risky-bg)}
.rm-menu [role="menuitem"]:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.rm-menu svg{width:16px;height:16px}

/* The Applications list gets one narrow last column for the menu (administrators only). The
   list's columns are not changed; where the extra column would not fit, an administrator gets
   the list's OWN narrower arrangements earlier (measured in Chromium 2026-11-02: the full layout
   needs 974 px of list, so with the menu it fits from a 1341 px window; with the Status column
   moved under the name, as the list itself does below 1180 px, but the full layout's 300 px for
   the verdict chips, it fits from 1178 px; below that the phone cards). Without this the menu
   would sit in the part of the row the list clips, out of view. */
.app-list.has-act{--al-cols:minmax(210px,2fr) minmax(120px,1fr) 52px 96px minmax(300px,1.5fr) minmax(110px,.9fr) 36px}
.al-act{display:flex;justify-content:flex-end}
th.act-col,td.act-col{width:44px;text-align:right}
@media (max-width:1340px){
  .app-list.has-act{--al-cols:minmax(180px,2fr) 48px 96px minmax(300px,1.5fr) minmax(100px,.9fr) 36px}
  .app-list.has-act .al-head .al-st,.app-list.has-act .al-row > .al-st{display:none}
  .app-list.has-act .al-st-in{display:block}
}
@media (max-width:1177px){
  /* the phone cards (style.css, max-width 760px), with the menu in the card's top-right corner */
  .app-list.has-act .al-head{display:none}
  .app-list.has-act .al-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px;padding:12px 14px;position:relative}
  .app-list.has-act .al-app{grid-column:1/-1;padding-right:36px}
  .app-list.has-act .al-row > [data-label]::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:2px}
  .app-list.has-act .al-num{text-align:left}
  .app-list.has-act .al-row .vsum{flex-wrap:wrap}
  .app-list.has-act .al-act{position:absolute;top:8px;right:8px}
}

/* the dialog */
.del-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin:16px 0 6px}
.del-counts{margin:0}
.del-keeps{margin:0;padding-left:18px}
.del-keeps li{margin:0 0 8px}
.del-fail{max-height:220px;overflow:auto;padding-left:18px;overflow-wrap:anywhere}