/* Installed-agents list: on-brand row actions + the small bits the table needs.
 *
 * Ported from the design handoff (installed-actions.css + components.css). The
 * handoff was authored against abstract tokens (--fg-1/--stroke/--r-*/.theme-*)
 * and unprefixed class names; both are translated to OUR rebrand here, matching
 * the convention already used by sort_menu.css / lang_picker.css / whats_new.css:
 *
 *     --fg-1 -> --kw-fg        --fg-2 -> --kw-fg-muted    --fg-3 -> --kw-fg-subtle
 *     --surface-2 -> --kw-bg-subtle      --bg-elevated -> --kw-bg-elevated
 *     --stroke -> --kw-border-color      --stroke-soft -> --kw-border-soft
 *     --r-sm -> --kw-radius-sm  --r-md -> --kw-radius-md  --r-pill -> --kw-radius-pill
 *     --font-display -> --kw-font-headline    --font-mono -> --kw-font-mono
 *     --kw-brand-blue -> --kw-blue   --kw-gold-ink -> --kw-yellow-ink
 *     --kw-error -> --kw-red         .theme-dark -> html.dark / .theme-light -> html.light
 *
 * Classes are kw- prefixed to match the primitives kit and avoid colliding with
 * the generic mockup names (.tag/.pill/.toggle). Loaded after primitives.css.
 */

/* ---- Agent cell: category-tinted icon chip + name/id ---------------------- */
/* Brand note: icons are normally white/gold only. This chip is the documented
   exception (handoff §2a) — a category tint bg + a category-coloured glyph, the
   same colour family as .kw-cat. The tint is derived via color-mix so it reads
   as one family on both themes; --kw-cat-c falls back to brand blue. */
.kw-row-ico { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.kw-row-ico__body { min-width: 0; }
.kw-row-ico__name { font-weight: 600; color: var(--kw-fg); }
.kw-row-ico:hover .kw-row-ico__name { text-decoration: underline; }
.kw-row-ico__id { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-top: 1px; }

.kw-chip-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--kw-radius-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 14%, transparent);
  color: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 70%, var(--kw-fg));
}
html.dark .kw-chip-ico {
  background: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 22%, transparent);
  color: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 58%, #fff);
}
.kw-chip-ico--compliance     { --kw-cat-c: var(--kw-cat-compliance); }
.kw-chip-ico--governance     { --kw-cat-c: var(--kw-cat-governance); }
.kw-chip-ico--security       { --kw-cat-c: var(--kw-cat-security); }
.kw-chip-ico--administrative { --kw-cat-c: var(--kw-cat-administrative); }
.kw-chip-ico--dlp            { --kw-cat-c: var(--kw-cat-dlp); }
.kw-chip-ico--ediscovery     { --kw-cat-c: var(--kw-cat-ediscovery); }
.kw-chip-ico--privacy        { --kw-cat-c: var(--kw-cat-privacy); }

/* ---- Operations: neutral mono metadata tags (not coloured chips) ---------- */
.kw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-tag {
  display: inline-flex; align-items: center;
  font-family: var(--kw-font-mono); font-size: 11px;
  padding: 3px 9px; border-radius: var(--kw-radius-sm);
  border: 1px solid var(--kw-border-color);
  background: var(--kw-bg-subtle); color: var(--kw-fg-subtle);
  white-space: nowrap;
}
html.dark .kw-tag { background: rgba(77, 96, 251, 0.08); border-color: var(--kw-glass-stroke); color: var(--kw-muted-lavender); }

/* ---- Beta-channel pill switch (server-state driven; checkbox stays the truth) */
.kw-toggle { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.kw-toggle__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kw-toggle__switch {
  width: 38px; height: 21px; flex-shrink: 0;
  border-radius: var(--kw-radius-pill);
  background: rgba(140, 140, 160, 0.35);
  position: relative; transition: background 160ms;
}
.kw-toggle__switch::after {
  content: ""; position: absolute; inset-inline-start: 2px; top: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  transition: inset-inline-start 160ms;
}
.kw-toggle__input:checked ~ .kw-toggle__switch { background: var(--kw-blue); }
.kw-toggle__input:checked ~ .kw-toggle__switch::after { inset-inline-start: 19px; }
html.dark .kw-toggle__input:checked ~ .kw-toggle__switch { background: var(--kw-electric-indigo); box-shadow: 0 0 12px rgba(77, 96, 251, 0.5); }
.kw-toggle__input:focus-visible ~ .kw-toggle__switch { outline: 2px solid var(--kw-blue); outline-offset: 2px; }
.kw-toggle__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--kw-font-mono); font-size: 13px; color: var(--kw-fg-muted); }

/* ---- All / Updates-available underline tabs + count pills ----------------- */
.kw-subtabs { display: inline-flex; gap: 18px; }
.kw-subtabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; font-size: 14px; color: var(--kw-fg-subtle);
  border-bottom: 2px solid transparent; text-decoration: none;
  transition: color 150ms, border-color 150ms;
}
.kw-subtabs a:hover { color: var(--kw-fg); }
.kw-subtabs a.is-active { color: var(--kw-fg); font-weight: 600; border-bottom-color: var(--kw-blue); }
.kw-subtabs__count {
  font-family: var(--kw-font-mono-num); font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--kw-radius-pill);
  background: var(--kw-bg-subtle); color: var(--kw-fg-muted);
  border: 1px solid var(--kw-border-color);
}
.kw-subtabs__count--update { color: var(--kw-yellow-ink); background: #FEF6DC; border-color: #F6E0A0; }
html.dark .kw-subtabs__count { background: rgba(77, 96, 251, 0.10); border-color: var(--kw-glass-stroke); color: var(--kw-muted-lavender); }
html.dark .kw-subtabs__count--update { color: var(--kw-signal-gold); background: rgba(253, 202, 19, 0.12); border-color: rgba(253, 202, 19, 0.32); }

/* ---- "Showing agents with updates available" filter chip ------------------ */
.kw-filterchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 13px; border-radius: var(--kw-radius-pill);
  background: rgba(77, 96, 251, 0.10); border: 1px solid rgba(77, 96, 251, 0.3);
  font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-blue);
}
html.light .kw-filterchip { background: #EEF1FE; }
.kw-filterchip__clear {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; border: 0; background: rgba(77, 96, 251, 0.18);
  color: var(--kw-blue); cursor: pointer; text-decoration: none;
}

/* ---- Row actions: contextual Upgrade button + kebab overflow -------------- */
/* Every row ends in the kebab, so the action column aligns whether or not the
   row also shows the Upgrade button. */
.kw-rowactions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.kw-btn-row {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: var(--kw-font-headline); font-weight: 600; font-size: 12.5px; letter-spacing: -0.01em;
  padding: 6px 12px; border-radius: var(--kw-radius-md); border: 1px solid;
}
/* Upgrade = the only "warm" action: gold-tinted on light, gold glass on dark.
   Ties visually to the gold update pill. */
.kw-btn-row--upgrade { background: #FEF6DC; border-color: #F0D89A; color: var(--kw-yellow-ink); }
.kw-btn-row--upgrade:hover { background: #FDEFC4; border-color: #E7C77A; }
html.dark .kw-btn-row--upgrade { background: rgba(253, 202, 19, 0.14); border-color: rgba(253, 202, 19, 0.4); color: var(--kw-signal-gold); }
html.dark .kw-btn-row--upgrade:hover { background: rgba(253, 202, 19, 0.22); }

.kw-kebab { position: relative; }
.kw-kebab__btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--kw-radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--kw-fg-subtle); cursor: pointer; transition: 120ms;
}
.kw-kebab__btn:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); border-color: var(--kw-border-color); }
html.dark .kw-kebab__btn:hover { background: rgba(77, 96, 251, 0.10); color: #fff; }
.kw-kebab.is-open .kw-kebab__btn { background: var(--kw-bg-subtle); color: var(--kw-fg); border-color: var(--kw-border-color); }
.kw-kebab__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 188px; padding: 6px;
  border-radius: var(--kw-radius-md); background: var(--kw-bg-elevated);
  border: 1px solid var(--kw-border-color);
  box-shadow: 0 12px 34px -10px rgba(11, 14, 36, 0.3);
  display: none; text-align: start;
}
html.dark .kw-kebab__menu { background: var(--kw-midnight-navy); border-color: rgba(77, 96, 251, 0.3); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
.kw-kebab.is-open .kw-kebab__menu { display: block; }
.kw-kebab__menu form { margin: 0; }
.kw-kebab__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--kw-radius-sm);
  background: none; cursor: pointer;
  font-family: var(--kw-font-headline); font-size: 13.5px; color: var(--kw-fg);
  text-align: start; text-decoration: none;
}
.kw-kebab__item:hover { background: var(--kw-bg-subtle); }
html.dark .kw-kebab__item { color: #E8EAF6; }
html.dark .kw-kebab__item:hover { background: rgba(77, 96, 251, 0.12); }
.kw-kebab__item .kw-ico { color: var(--kw-fg-subtle); flex-shrink: 0; }
.kw-kebab__sep { height: 1px; margin: 6px 4px; background: var(--kw-border-soft); }
.kw-kebab__item--danger { color: var(--kw-red); }
.kw-kebab__item--danger .kw-ico { color: var(--kw-red); }
.kw-kebab__item--danger:hover { background: rgba(229, 69, 69, 0.1); }

/* ---- Standalone disclaimer note under the table --------------------------- */
.kw-table-note {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle);
}