/* agents_page.css — Two-pane master/detail layout for the Agents dashboard.
   Ported from the DirectionB design prototype and mapped onto the existing
   Zynk Cloud design tokens (variables.css). Scoped under .agents-page so
   nothing here leaks into the wider site. */

.agents-page {
  --ap-muted: #666;
  --ap-row-hover: #fafbfc;
  --ap-section-bg: #fafbfc;
  --ap-section-border: #f0f2f3;
  --ap-row-divider: #f4f5f6;
  --ap-tree-line: #e5e9ec;
  --ap-selected-bg: #e3edf2;
  --ap-paused-fg: #8a9299;

  /* Alert tints (matching the global alert palette) */
  --ap-alert-warning-bg: #fdf0e3;
  --ap-alert-warning-border: #f9ccaa;
  --ap-alert-warning-fg: #7a3500;
  --ap-alert-danger-bg: #fde8ea;
  --ap-alert-danger-border: #f5b8bc;
  --ap-alert-danger-fg: #7a1016;

  padding-bottom: 40px;
}

/* ── Hero header ───────────────────────────────────────────────────── */
.agents-page__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 4px 0 16px;
  flex-wrap: wrap;
}
.agents-page__hero h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ui-dark);
}
.agents-page__hero .lead {
  margin: 0;
  font-size: 14px;
  color: var(--ap-muted);
}
.agents-page__hero .actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Two-pane shell ────────────────────────────────────────────────── */
.agents-page__shell {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 720px;
}
@media (max-width: 991.98px) {
  .agents-page__shell {
    grid-template-columns: 1fr;
  }
  /* On stacked layouts, drop the sticky list so the detail pane below
     scrolls naturally with the page. Without this, the detail's content
     (notably the big agent logo) paints OVER the sticky list because
     position:sticky doesn't establish its own stacking context unless
     z-index is set. */
  .ap-list {
    position: static;
    max-height: none;
  }
}

/* ── Left pane — agent tree ────────────────────────────────────────── */
.ap-list {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 180px);
  position: sticky;
  top: 12px;
}
.ap-list__hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.ap-list__search {
  position: relative;
}
.ap-list__search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
}
.ap-list__search .ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ap-muted);
}
.ap-list__filters {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ap-list__filters button {
  padding: 3px 10px;
  border-radius: 9999px;
  background: #f3f5f6;
  color: #333;
  border: 0;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ap-list__filters button.active {
  background: var(--ui-dark);
  color: #fff;
}
.ap-list__body {
  flex: 1;
  overflow-y: auto;
}
.ap-list__empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--ap-muted);
  font-size: 13px;
}

/* Flow group headers inside the tree */
.ap-flowgroup {
  border-bottom: 1px solid var(--ap-section-border);
}
.ap-flowgroup__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ap-section-bg);
  font-size: 12.5px;
  color: var(--ui-dark);
  font-weight: 600;
  cursor: pointer;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ap-flowgroup__hd:hover {
  background: #f5f7f8;
}
.ap-flowgroup__hd .chev {
  color: var(--ap-muted);
  transition: transform 0.15s;
  font-size: 10px;
}
/* Stacked connection logos per side of an arrow */
.ap-flowgroup__logos {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.ap-flowgroup__logos .conn-logo-circle + .conn-logo-circle {
  margin-left: -6px;
  border: 1.5px solid #fff;
}
.ap-flowgroup__hd .ct {
  margin-left: auto;
  font-size: 11px;
  color: var(--ap-muted);
  font-weight: 500;
}
.ap-flowgroup__hd .conn-logo-circle {
  width: 22px;
  height: 22px;
}

.ap-alist {
  padding: 2px 0 6px;
}
.ap-arow {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ap-arow.child {
  padding-left: 32px;
}
.ap-arow.child::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ap-tree-line);
}
.ap-arow.child::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ap-tree-line);
}
.ap-arow:hover {
  background: var(--ap-row-hover);
}
.ap-arow.selected {
  background: var(--ap-selected-bg);
  border-left-color: var(--brand-primary);
}
.ap-arow .nm {
  font-size: 13px;
  color: var(--ui-dark);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ap-arow.off .nm {
  color: var(--ap-paused-fg);
}
.ap-arow .sub {
  font-size: 11px;
  color: var(--ap-muted);
  margin-top: 1px;
}
.ap-arow .mode-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: inherit;
}
.ap-arow .mode-tag.exp {
  background: #e3edf2;
  color: #1a3040;
}
.ap-arow .mode-tag.imp {
  background: #e3f5e8;
  color: #004d12;
}

/* Chevron button for parents with children */
.ap-chev-btn {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: var(--ap-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 11px;
}
.ap-chev-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ui-dark);
}

/* Status dots */
.ap-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.ap-dot--healthy {
  background: var(--status-success-bg);
  box-shadow: 0 0 0 2px rgba(0, 138, 33, 0.18);
}
.ap-dot--warning,
.ap-dot--waiting {
  background: var(--status-warning-bg);
  box-shadow: 0 0 0 2px rgba(239, 103, 0, 0.18);
}
.ap-dot--failed {
  background: var(--status-failed-bg);
  box-shadow: 0 0 0 2px rgba(203, 55, 74, 0.18);
}
.ap-dot--paused {
  background: #8a9299;
  box-shadow: 0 0 0 2px rgba(138, 146, 153, 0.18);
}
.ap-dot--unknown,
.ap-dot--off {
  background: #c4cbd0;
  box-shadow: 0 0 0 2px rgba(196, 203, 208, 0.3);
}

/* ── Right pane — agent detail ─────────────────────────────────────── */
.ap-detail {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ap-detail.hidden {
  display: none;
}
.ap-detail__hd {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.ap-detail__crumb {
  font-size: 12px;
  color: var(--ap-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ap-detail__crumb i {
  font-size: 10px;
}
.ap-detail__crumb .current {
  color: var(--ui-dark);
  font-weight: 500;
}
.ap-detail__titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ap-detail__titlerow h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ui-dark);
}
.ap-detail__titlerow .meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.ap-detail__status-chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ap-muted);
}
.ap-detail__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ap-section-border);
  flex-wrap: wrap;
}
.ap-detail__actions .btn {
  font-size: 12px;
}
.ap-detail__actions .ms-auto {
  margin-left: auto;
}

.ap-detail__body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.ap-detail__body section + section {
  margin-top: 24px;
}
.ap-detail__body h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-muted);
  font-weight: 600;
}

/* Mode badge + health badge (small, inline) */
.ap-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ap-mode--export {
  background: #e3edf2;
  color: #1a3040;
}
.ap-mode--import {
  background: #e3f5e8;
  color: #004d12;
}
.ap-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
}
.ap-health i {
  font-size: 11px;
}
.ap-health--healthy {
  background: #e3f5e8;
  color: #005a16;
}
.ap-health--warning,
.ap-health--waiting {
  background: var(--ap-alert-warning-bg);
  color: var(--ap-alert-warning-fg);
}
.ap-health--failed {
  background: var(--ap-alert-danger-bg);
  color: var(--ap-alert-danger-fg);
}
.ap-health--paused,
.ap-health--unknown {
  background: #eceef0;
  color: #55606a;
}

/* Callout banners inside the detail body */
.ap-callout {
  padding: 12px 14px;
  background: var(--ap-alert-warning-bg);
  border: 1px solid var(--ap-alert-warning-border);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ap-alert-warning-fg);
  margin-bottom: 18px;
}
.ap-callout i {
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}
.ap-callout.danger {
  background: var(--ap-alert-danger-bg);
  border-color: var(--ap-alert-danger-border);
  color: var(--ap-alert-danger-fg);
}
.ap-callout a {
  color: inherit;
  text-decoration: underline;
}

/* KPI cells */
.ap-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 767.98px) {
  .ap-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ap-kpis .cell {
  background: var(--ap-section-bg);
  border: 1px solid var(--ap-section-border);
  border-radius: 6px;
  padding: 12px 14px;
}
.ap-kpis .cell .lbl {
  font-size: 11px;
  color: var(--ap-muted);
  font-weight: 500;
  margin: 0 0 4px;
}
.ap-kpis .cell .val {
  font-size: 20px;
  font-weight: 600;
  color: var(--ui-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ap-kpis .cell .val.small {
  font-size: 15px;
}
.ap-kpis .cell .sub {
  font-size: 11px;
  color: var(--ap-muted);
  margin-top: 4px;
}

/* Sparkline */
.ap-spark {
  width: 100%;
  height: 50px;
  display: block;
  margin-top: 12px;
  /* Allow active/hover circles near the edges to render fully — SVG's
     UA-default overflow: hidden would otherwise clip them. */
  overflow: visible;
}
.ap-spark path.line {
  fill: none;
  stroke-width: 1.5;
}
.ap-spark--ok path.line {
  stroke: var(--status-success-bg);
}
.ap-spark--ok path.fill {
  fill: rgba(0, 138, 33, 0.1);
}
.ap-spark--warn path.line {
  stroke: var(--status-warning-bg);
}
.ap-spark--warn path.fill {
  fill: rgba(239, 103, 0, 0.1);
}
.ap-spark--err path.line {
  stroke: var(--status-failed-bg);
}
.ap-spark--err path.fill {
  fill: rgba(203, 55, 74, 0.1);
}
.ap-spark--off path.line {
  stroke: #b7bec4;
}
.ap-spark--off path.fill {
  fill: rgba(138, 146, 153, 0.1);
}

/* Activity section header with range selector */
.ap-activity__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.ap-activity__hd h3 {
  margin: 0;
}
.ap-range {
  display: inline-flex;
  background: var(--ap-section-bg);
  border: 1px solid var(--ap-section-border);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.ap-range__btn {
  border: 0;
  background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ap-muted);
  cursor: pointer;
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ap-range__btn:hover {
  color: var(--ui-dark);
}
.ap-range__btn.active {
  background: #fff;
  color: var(--ui-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ap-range__panel.hidden {
  display: none;
}

/* Chart container with title, peak, and axis labels */
.ap-chart {
  margin-top: 18px;
  padding: 14px;
  background: var(--ap-section-bg);
  border: 1px solid var(--ap-section-border);
  border-radius: 6px;
}
.ap-chart__hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ap-chart__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-dark);
  letter-spacing: 0.01em;
}
.ap-chart__sub {
  font-size: 11px;
  color: var(--ap-muted);
  margin-top: 2px;
}
.ap-chart__peak {
  font-size: 11px;
  color: var(--ap-muted);
  background: #fff;
  border: 1px solid var(--ap-section-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-chart .ap-spark {
  margin-top: 8px;
}
.ap-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ap-muted);
}
.ap-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  margin-top: 8px;
  color: var(--ap-muted);
  font-size: 12px;
  background: #fff;
  border: 1px dashed var(--ap-section-border);
  border-radius: 4px;
}
.ap-chart__empty i {
  font-size: 14px;
  opacity: 0.6;
}

/* Interactive plot: positions tooltip relative to chart */
.ap-chart__plot {
  position: relative;
  margin-top: 8px;
}

/* HTML overlay holding the dot buttons; sits exactly on top of the SVG.
   Using HTML elements (rather than SVG circles inside a stretched SVG)
   keeps the dots perfectly round regardless of the chart's aspect ratio. */
.ap-spark__dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Each data point — invisible by default, becomes a real circle on hover. */
.ap-spark__pt {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.ap-spark__pt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--ui-dark, #233);
  transform: translate(-50%, -50%);
  transition: width 0.1s ease, height 0.1s ease;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95);
}
.ap-spark__pt:hover::before,
.ap-spark__pt.ap-spark__pt--active::before {
  width: 8px;
  height: 8px;
}
/* Tint the active dot to match the spark's health colour. */
.ap-spark__pt.ap-spark--ok::before  { background: var(--status-success-bg); }
.ap-spark__pt.ap-spark--warn::before { background: var(--status-warning-bg); }
.ap-spark__pt.ap-spark--err::before  { background: var(--status-failed-bg); }
.ap-spark__pt.ap-spark--off::before  { background: #8a9299; }

/* Tooltip */
.ap-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(20, 26, 31, 0.95);
  color: #fff;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 5;
}
.ap-tip[hidden] {
  display: none;
}
.ap-tip__label {
  font-weight: 600;
  margin-bottom: 2px;
  opacity: 0.85;
}
.ap-tip__value .num {
  font-weight: 600;
}
.ap-tip__value .unit {
  opacity: 0.75;
  margin-left: 4px;
}

/* Settings grid */
.ap-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ap-section-border);
  border-radius: 6px;
  background: var(--ap-section-bg);
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .ap-settings {
    grid-template-columns: 1fr;
  }
}
.ap-settings .row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--ap-section-border);
  min-height: 42px;
  margin: 0;
}
.ap-settings .row:nth-child(-n+2) {
  border-top: 0;
}
.ap-settings .row:nth-child(2n) {
  border-left: 1px solid var(--ap-section-border);
}
@media (max-width: 767.98px) {
  .ap-settings .row:nth-child(2n) {
    border-left: 0;
  }
  .ap-settings .row:nth-child(2) {
    border-top: 1px solid var(--ap-section-border);
  }
}
.ap-settings .k {
  font-size: 11.5px;
  color: var(--ap-muted);
  font-weight: 500;
}
.ap-settings .v {
  font-size: 13px;
  color: var(--ui-dark);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.ap-settings .v.mono {
  font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 12px;
}
.ap-settings .edit {
  font-size: 11px;
  color: var(--brand-primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.ap-settings .edit:hover {
  text-decoration: underline;
}

/* Recent executions list */
.ap-exec {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ap-exec li {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--ap-row-divider);
  font-size: 13px;
}
.ap-exec li:last-child {
  border-bottom: 0;
}
.ap-exec .t {
  color: var(--ap-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ap-exec .m {
  color: var(--ap-muted);
  font-size: 12px;
}
.ap-exec .n {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ui-dark);
}
.ap-exec a {
  font-size: 12px;
  text-decoration: none;
}

.ap-empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--ap-muted);
}
.ap-empty-state i {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
  color: #c4cbd0;
}

/* ── Mobile: single-pane master/detail with a back button ──────────── */
.ap-back-btn {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ui-dark);
  cursor: pointer;
  align-items: center;
  gap: 4px;
}
.ap-back-btn i {
  font-size: 12px;
}

@media (max-width: 767.98px) {
  /* Hero: stack title + actions */
  .agents-page__hero {
    align-items: flex-start;
    padding: 4px 0 12px;
  }
  .agents-page__hero h1 {
    font-size: 1.3rem;
  }
  .agents-page__hero .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Tighter shell spacing */
  .agents-page__shell {
    gap: 10px;
    min-height: 0;
  }

  /* Free the list from sticky/fixed-height — let it flow naturally
     so it can be the only thing on screen in list mode. */
  .ap-list {
    position: static;
    max-height: none;
    border-radius: 6px;
  }
  .ap-list__hd {
    padding: 10px;
  }

  /* Mobile back button + hide the desktop "Agents" crumb fragment */
  .ap-back-btn {
    display: inline-flex;
    margin-right: 4px;
  }
  .ap-crumb-desktop,
  .ap-detail__crumb > i.bi-chevron-right {
    display: none;
  }
  .ap-detail__crumb {
    margin-bottom: 8px;
  }
  .ap-detail__crumb .current {
    font-weight: 600;
    color: var(--ui-dark);
  }

  /* Detail pane: tighter padding for small viewports */
  .ap-detail__hd {
    padding: 12px 14px 10px;
  }
  .ap-detail__body {
    padding: 14px;
  }
  .ap-detail__titlerow h2 {
    font-size: 16px;
  }
  /* Status chip drops below the title instead of being squeezed */
  .ap-detail__status-chip {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
  }

  /* Flow header roll-up count wraps to its own line if needed */
  .ap-flowgroup__hd {
    flex-wrap: wrap;
    padding: 10px;
  }
  .ap-flowgroup__hd .ct {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
  }

  /* Recent runs: stack date / status / count rather than 4 columns */
  .ap-exec li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time   link"
      "status count";
    row-gap: 4px;
  }
  .ap-exec .t  { grid-area: time; }
  .ap-exec .m  { grid-area: status; }
  .ap-exec .n  { grid-area: count; text-align: right; }
  .ap-exec a   { grid-area: link; text-align: right; }

  /* Master/detail: show only one pane at a time. Default is list view;
     adding .agents-page--detail-open swaps to the detail pane. */
  .agents-page__shell .ap-detail-wrap {
    display: none;
  }
  .agents-page--detail-open .ap-list {
    display: none !important;
  }
  .agents-page--detail-open .ap-detail-wrap {
    display: block !important;
    width: 100%;
  }
}