/*
 * Alerts (canvas board 18): the Alerts page (open cards, fixed list, all
 * good), Settings › Alerts (how it works, what we watch) and Edit an alert.
 * In the Agents list's look (ag-*, --ag-* tokens); search, tabs and the
 * chip are the Knowledge Base's and Conversations' (kb-*, cv-*, cl-*).
 * Prefixes: al- (Alerts), as- (Settings › Alerts), ae- (Edit).
 */

.al-page,
.as-page {
  gap: 20px;
}
.al-bar {
  gap: 8px;
  margin-bottom: -4px;
}
.al-agentchip {
  margin-inline-start: 4px;
}

/* ---------- icon in a tinted square, by type ---------- */
.al-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
}
.al-ico--red {
  color: var(--ag-red);
  background: color-mix(in srgb, var(--ag-red) 9%, var(--ag-card));
  border: 1px solid color-mix(in srgb, var(--ag-red) 16%, var(--ag-card));
}
.al-ico--amber {
  color: color-mix(in srgb, var(--ag-test) 78%, var(--ag-ink));
  background: color-mix(in srgb, var(--ag-test) 11%, var(--ag-card));
  border: 1px solid color-mix(in srgb, var(--ag-test) 22%, var(--ag-card));
}

/* ---------- Open: one card per alert, the edge by severity ---------- */
.al-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.al-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
}
.al-card--red {
  border-color: color-mix(in srgb, var(--ag-red) 38%, var(--ag-line));
}
.al-card--amber {
  border-color: color-mix(in srgb, var(--ag-test) 55%, var(--ag-line));
}
.al-card.is-marked {
  box-shadow: 0 0 0 3px var(--ag-hover);
}
.al-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-card__title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ag-ink);
}
.al-card__meta {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ag-muted);
}
.al-card__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
}
.ap-skin .al-card__actions .ag-btn,
.ap-skin .al-settings,
.ap-skin .al-good .ag-btn {
  gap: 8px;
}

/* ---------- Open, nothing open: all good ---------- */
.al-good {
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
}
.al-good__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--ag-live);
  background: color-mix(in srgb, var(--ag-live) 10%, var(--ag-card));
  border: 1px solid color-mix(in srgb, var(--ag-live) 20%, var(--ag-card));
}
.al-good__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.al-good__text {
  max-width: 440px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ag-muted);
}

/* ---------- Fixed: one white card, a row per alert ---------- */
.al-fixedcard {
  gap: 0;
  padding: 6px 22px;
}
.al-fixedlist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.al-fixed {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ag-line);
}
.al-fixed:last-child {
  border-bottom: 0;
}
.al-fixed[data-marked] {
  background: var(--ag-hover);
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: 10px;
}
.al-fixed__check {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ag-live);
}
.al-fixed__text {
  flex: 1;
  min-width: 0;
}
.al-fixed__title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ag-ink);
}
.al-fixed__by {
  flex: none;
  font-size: 13px;
  color: var(--ag-ink-2);
  white-space: nowrap;
}
.al-fixed__go {
  flex: none;
}
.ap-skin .al-ghost {
  height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
}
.al-none {
  padding: 40px 24px;
  text-align: center;
}

/* ---------- Settings › Alerts ---------- */
.as-page .kb-crumbs {
  margin-bottom: -10px;
}
.as-h {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ag-ink);
}
.as-how {
  gap: 14px;
  padding: 20px 22px;
}
.as-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.as-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
}
.as-step__n {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
  font-size: 13px;
  font-weight: 600;
}
.as-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.as-step__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ag-ink);
}
.as-step__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ag-muted);
}
.as-card {
  gap: 6px;
  padding: 20px 22px 8px;
}
.as-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.as-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ag-line);
  transition: opacity 0.15s ease;
}
.as-row:last-child {
  border-bottom: 0;
}
/* off: faded, the switch stays clear to turn it back on */
.as-row.is-off > :not(.switch) {
  opacity: 0.5;
}
.as-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.as-row__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ag-ink);
}
.as-row__rule {
  margin: 0;
  font-size: 14px;
  color: var(--ag-ink-2);
}
.as-limit {
  font-weight: 600;
  color: var(--ag-ink);
}
.ap-skin .as-edit {
  height: 34px;
  padding: 0 14px;
}

/* ---------- Edit an alert (drawer, Add source's look) ---------- */
.ae-drawer .drawer__body {
  gap: 22px;
}
.ae-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ag-ink);
}
.kb-add .ae-num {
  width: 72px;
  height: 34px;
  padding: 0 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ae-select {
  width: 100%;
  height: 42px;
  border-radius: 10px;
}
.ae-fixed {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 14px;
  color: var(--ag-ink-2);
}
.ae-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}
.ae-way {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ag-ink);
  cursor: pointer;
}
.ae-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 13.5px;
  line-height: 1.5;
}
.ae-preview p {
  margin: 0;
}
.ae-preview__head {
  font-weight: 600;
  color: var(--ag-ink);
}
.ae-preview__line {
  color: var(--ag-ink-2);
}
.ae-preview__link {
  margin-top: 4px;
  font-weight: 500;
  color: var(--ag-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- narrow screens ---------- */
@media (max-width: 767px) {
  .al-card {
    flex-wrap: wrap;
  }
  .al-card__actions {
    flex-basis: 100%;
    padding-inline-start: 56px;
  }
  .al-fixed {
    flex-wrap: wrap;
  }
  .al-fixed__by,
  .al-fixed__go {
    flex-basis: 100%;
    padding-inline-start: 40px;
  }
  .as-steps {
    grid-template-columns: 1fr;
  }
  .as-row {
    flex-wrap: wrap;
  }
}

/* ---------- actionable alerts (3 Oct 2026): cause, split counts, Details, one alert's page ---------- */
.al-card__cause {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ag-ink);
}
.ap-skin .al-card__actions .ag-btn svg {
  margin-inline-end: -2px;
}


/* ---------- the Edit drawer's For (3 Oct 2026): All agents / Some agents ---------- */
.ae-for .dfield {
  margin: 0;
}
.ae-agents {
  margin-top: 10px;
}
.ae-unwatched {
  margin-top: 8px;
}

/* ---------- How alerts work, simplified (3 Oct 2026): one row of three short steps ---------- */
.as-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.as-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ag-ink);
}
.as-flow__arrow {
  display: inline-flex;
  color: var(--ag-faint);
}

/* ---------- the Alerts list (3 Oct 2026): grouped by agent, Home's alert look with its own
   styles here (home.css is Home's and can change) ---------- */
.al-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.al-group {
  gap: 0;
  padding: 0 18px;
}
/* the group's header: avatar, name, version, status chip, the count on the end; it opens the agent */
.al-gh {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ag-well-line);
  color: var(--ag-ink);
  text-decoration: none;
}
.al-gh__name {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ag-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.al-gh:hover .al-gh__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.al-gh .ag-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
}
.al-gh__count {
  flex: none;
  font-size: 12.5px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.al-gh__proj {
  width: 32px;
  height: 32px;
  color: var(--ag-ink-2);
}
.al-group__face {
  width: 32px;
  height: 32px;
  flex: none;
}
.al-group__v {
  flex: none;
  font-size: 13px;
  color: var(--ag-faint);
}
.al-rows,
.al-group .al-fixedlist {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* one alert: the tile icon (red or amber on the mark), what happened, since when, the solution; Mark as done on the end */
.al-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ag-well-line);
  cursor: pointer;
}
.al-row:last-child {
  border-bottom: 0;
}
.al-ricon--red {
  color: var(--ag-red);
}
.al-ricon--amber {
  color: var(--ag-i-amber);
}
.al-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.al-row__title {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ag-ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.al-row:hover .al-row__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.al-row__meta {
  font-size: 12.5px;
  color: var(--ag-muted);
}
/* the solution: one line, the whole text on hover (Spend opened: all of it) */
.al-row__how {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ag-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-row__how--full {
  white-space: normal;
}
.al-row__done {
  flex: none;
}
.al-group .al-fixed {
  padding: 14px 0;
  border-bottom: 1px solid var(--ag-well-line);
}
.al-group .al-fixed:last-child {
  border-bottom: 0;
}
/* Done: a quiet tick (grey in a thin ring), not a green disc: the list is history, not good news */
.al-group .al-fixed__check {
  color: var(--ag-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ag-line);
}