/* ================================================================
   BIZMETRY DESIGN SYSTEM — agent-panel.css
   Prefix: apd-
   ================================================================
   Tokens → Dialog → Toolbar → Controls → Table → Cells
   → Metric Bars → Alert Dots → Action Buttons → States
   → Responsive
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */

.apd-dialog {

  /* ── Navy palette ──────────────────────────────────────── */
  --bm-navy-900:  #111827;
  --bm-navy-800:  #1E2A3A;
  --bm-navy-700:  #2D3A52;
  --bm-navy-500:  #4B5878;
  --bm-navy-300:  #8E97B4;
  --bm-navy-200:  #BFC5D8;
  --bm-navy-100:  #DDE2EF;
  --bm-navy-50:   #F4F5FA;

  /* ── Brand gradient ────────────────────────────────────── */
  --bm-indigo-600: #4756e8;
  --bm-indigo-500: #5b6cf9;
  --bm-indigo-200: #a5b4fc;
  --bm-indigo-50:  #eef0ff;
  --bm-violet-600: #764ba2;
  --bm-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);

  /* ── Teal ──────────────────────────────────────────────── */
  --bm-teal-600:  #009977;
  --bm-teal-500:  #00BFA5;
  --bm-teal-100:  #CCFAF3;
  --bm-teal-50:   #E6FAF7;

  /* ── Semantic ──────────────────────────────────────────── */
  --bm-success:        #059669;
  --bm-success-bg:     #ECFDF5;
  --bm-success-border: #6EE7B7;
  --bm-success-text:   #065F46;

  --bm-warning:        #D97706;
  --bm-warning-bg:     #FFFBEB;
  --bm-warning-border: #FCD34D;
  --bm-warning-text:   #92400E;

  --bm-error:          #DC2626;
  --bm-error-bg:       #FEF2F2;
  --bm-error-border:   #FECACA;
  --bm-error-text:     #991B1B;

  --bm-info:           #2563EB;
  --bm-info-bg:        #EFF6FF;
  --bm-info-border:    #BFDBFE;

  /* ── Surfaces ──────────────────────────────────────────── */
  --bm-surface:    #FFFFFF;
  --bm-surface-2:  #F7F8FC;
  --bm-surface-3:  #EFF1F8;

  /* ── Text ──────────────────────────────────────────────── */
  --bm-text-primary:   #111827;
  --bm-text-secondary: #4B5878;
  --bm-text-muted:     #8E97B4;
  --bm-text-inverse:   #FFFFFF;

  /* ── Borders ───────────────────────────────────────────── */
  --bm-border:        #E2E5EF;
  --bm-border-subtle: #EFF1F8;
  --bm-border-strong: #C5CCDF;

  /* ── Radius ────────────────────────────────────────────── */
  --bm-r-sm:   4px;
  --bm-r-md:   6px;
  --bm-r-lg:   10px;
  --bm-r-xl:   14px;
  --bm-r-pill: 100px;

  /* ── Typography ────────────────────────────────────────── */
  --bm-font-display: 'Outfit', system-ui, sans-serif;
  --bm-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Shadows ───────────────────────────────────────────── */
  --bm-shadow-xs: 0 1px 2px rgba(8,12,24,.06);
  --bm-shadow-sm: 0 1px 4px rgba(8,12,24,.08), 0 1px 2px rgba(8,12,24,.04);
  --bm-shadow-md: 0 4px 12px rgba(8,12,24,.10), 0 2px 4px rgba(8,12,24,.06);

  /* ── Transition ────────────────────────────────────────── */
  --bm-t: 160ms cubic-bezier(.4,0,.2,1);

  /* ── Action button colors (preserved semantic intent) ───── */
  --apd-act-restart:  #D97706;   /* warning amber  */
  --apd-act-edit:     #5b6cf9;   /* brand indigo   */
  --apd-act-stop:     #DC2626;   /* error red      */
  --apd-act-logs:     #059669;   /* success green  */
  --apd-act-download: #764ba2;   /* brand violet   */
  --apd-act-metrics:  #00BFA5;   /* teal           */

  /* ── Dialog sizing ──────────────────────────────────────── */
  width: 98vw !important;
  max-width: 1900px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 24px 64px rgba(8,12,24,.22) !important;
  font-family: var(--bm-font-body) !important;
}

/* Protect Material Icons */
.apd-dialog md-icon,
.apd-dialog .material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
}


/* ── 2. Toolbar ───────────────────────────────────────────── */

.apd-toolbar {
  background: var(--bm-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 68px !important;
  flex-shrink: 0 !important;
}

.apd-toolbar-tools {
  padding: 0 20px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.apd-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Icon wrapper */
.apd-toolbar-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--bm-r-lg) !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.apd-toolbar-icon-wrap md-icon {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--bm-text-inverse) !important;
}

/* Title block */
.apd-toolbar-title {
  font-family: var(--bm-font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
}

.apd-toolbar-subtitle {
  font-family: var(--bm-font-body) !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,.60) !important;
  margin: 2px 0 0 !important;
}

/* Stats badges */
.apd-stats-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,.14) !important;
  color: var(--bm-text-inverse) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.apd-stats-badge md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
}

.apd-stats-badge--online {
  background: rgba(5,150,105,.22) !important;
  color: var(--bm-success-border) !important;
  border-color: rgba(110,231,183,.28) !important;
}

.apd-stats-badge--offline {
  background: rgba(220,38,38,.22) !important;
  color: var(--bm-error-border) !important;
  border-color: rgba(254,202,202,.28) !important;
}

/* Refreshing pill */
.apd-refreshing-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  padding: 5px 14px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
}

.apd-refreshing-spinner circle { stroke: var(--bm-text-inverse) !important; }

/* Close button */
.apd-close-btn {
  color: rgba(255,255,255,.75) !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

.apd-close-btn:hover { background: rgba(255,255,255,.12) !important; }
.apd-close-btn md-icon { color: inherit !important; }


/* ── 3. Content Area ──────────────────────────────────────── */

.apd-content {
  background: var(--bm-surface-2) !important;
  padding: 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ── 4. Controls Bar ──────────────────────────────────────── */

.apd-controls-wrap {
  padding: 16px 20px 0 !important;
  flex-shrink: 0 !important;
}

.apd-controls-card {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-xs) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.apd-controls-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--bm-border-subtle) !important;
}

.apd-ctrl-sep {
  width: 1px !important;
  height: 32px !important;
  background: var(--bm-border) !important;
  flex-shrink: 0 !important;
}

.apd-ctrl-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.apd-ctrl-group--slider { min-width: 200px !important; }

.apd-ctrl-label {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}


/* ── 5. Selects ───────────────────────────────────────────── */

.apd-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.apd-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 34px !important;
  padding: 0 30px 0 10px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface-2) !important;
  border: 1px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: var(--bm-t) !important;
  min-width: 140px !important;
}

.apd-select:hover {
  background: var(--bm-surface-3) !important;
  border-color: var(--bm-border-strong) !important;
}

.apd-select:focus {
  background: var(--bm-surface) !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.apd-select-caret {
  position: absolute !important;
  right: 6px !important;
  pointer-events: none !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-muted) !important;
}


/* ── 6. Search ────────────────────────────────────────────── */

.apd-search-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  min-width: 220px !important;
  max-width: 340px !important;
  flex: 1 !important;
}

.apd-search-icon {
  position: absolute !important;
  left: 10px !important;
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: var(--bm-text-muted) !important;
  pointer-events: none !important;
}

.apd-search-input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 32px 0 34px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface-2) !important;
  border: 1px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  outline: none !important;
  transition: var(--bm-t) !important;
}

.apd-search-input::placeholder { color: var(--bm-text-muted) !important; }

.apd-search-input:focus {
  background: var(--bm-surface) !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.apd-search-clear {
  position: absolute !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transition: var(--bm-t) !important;
}

.apd-search-clear:hover { background: rgba(8,12,24,.08) !important; }

.apd-search-clear md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--bm-text-muted) !important;
}


/* ── 7. Slider ────────────────────────────────────────────── */

.apd-slider { margin: 0 !important; height: 28px !important; }
.apd-slider .md-track            { background: var(--bm-border-strong) !important; height: 4px !important; }
.apd-slider .md-track-fill       { background: var(--bm-indigo-500) !important; height: 4px !important; }
.apd-slider .md-thumb::after     { background: var(--bm-indigo-500) !important; }
.apd-slider .md-thumb-container .md-thumb { background: var(--bm-indigo-500) !important; }


/* ── 8. Buttons ───────────────────────────────────────────── */

.apd-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  height: 34px !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.apd-btn md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  color: inherit !important;
}

.apd-btn--ghost {
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1px solid var(--bm-border) !important;
  align-self: flex-end !important;
}

.apd-btn--ghost:hover:not([disabled]) {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-border-strong) !important;
}


/* ── 9. Summary Chips ─────────────────────────────────────── */

.apd-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  flex-wrap: wrap !important;
}

.apd-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

.apd-chip md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

.apd-chip--blue {
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-600) !important;
  border-color: var(--bm-indigo-200) !important;
}

.apd-chip--green {
  background: var(--bm-success-bg) !important;
  color: var(--bm-success-text) !important;
  border-color: var(--bm-success-border) !important;
}

.apd-chip--red {
  background: var(--bm-error-bg) !important;
  color: var(--bm-error-text) !important;
  border-color: var(--bm-error-border) !important;
}


/* ── 10. Section Header ───────────────────────────────────── */

.apd-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 11px 16px !important;
  background: var(--bm-surface-3) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  position: relative !important;
}

.apd-section-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--bm-grad-brand) !important;
}

.apd-section-header md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-indigo-500) !important;
  flex-shrink: 0 !important;
}

.apd-section-header > span {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  flex: 1 !important;
}

.apd-section-count {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-500) !important;
  padding: 2px 10px !important;
  border-radius: var(--bm-r-pill) !important;
  flex: 0 0 auto !important;
}


/* ── 11. Card ─────────────────────────────────────────────── */

.apd-card {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
}


/* ── 12. Table Wrap ───────────────────────────────────────── */

.apd-table-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 0 20px 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.apd-table-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.apd-table-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.apd-table-scroll::-webkit-scrollbar-track { background: var(--bm-surface-2); border-radius: var(--bm-r-pill); }
.apd-table-scroll::-webkit-scrollbar-thumb { background: var(--bm-border-strong); border-radius: var(--bm-r-pill); }
.apd-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--bm-navy-300); }


/* ── 13. Table ────────────────────────────────────────────── */

.apd-table {
  width: 100% !important;
  min-width: 1440px !important;
  border-collapse: collapse !important;
  font-family: var(--bm-font-body) !important;
}

.apd-th {
  padding: 12px 14px !important;
  text-align: left !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--bm-border) !important;
  white-space: nowrap !important;
  background: var(--bm-surface-3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

.apd-td:first-child { padding-left: 14px !important; }
.apd-th--center { text-align: center !important; }
.apd-th--actions { width: 300px !important; }

.apd-td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  text-align: left !important;
  border-bottom: 1px solid var(--bm-border-subtle) !important;
  font-family: var(--bm-font-body) !important;
}

.apd-td--center  { text-align: center !important; }
.apd-td--actions { padding: 6px 10px !important; }

.apd-row {
  cursor: pointer !important;
  transition: background var(--bm-t) !important;
}

.apd-row:hover { background: var(--bm-indigo-50) !important; }

.apd-row:hover .apd-td {
  border-bottom-color: var(--bm-indigo-200) !important;
}

.apd-row:last-child .apd-td { border-bottom: none !important; }

/* Alert row pulse */
.apd-row--alert {
  animation: bm-apd-row-pulse 1.2s ease-in-out infinite !important;
}

.apd-row--alert .apd-td {
  border-bottom-color: rgba(217,119,6,.24) !important;
}

.apd-row--alert:hover {
  animation: none !important;
  background: var(--bm-warning-bg) !important;
}

@keyframes bm-apd-row-pulse {
  0%, 100% { background: transparent; }
  50%       { background: rgba(217,119,6,.06); }
}


/* ── 14. Cell Types ───────────────────────────────────────── */

.apd-agent-name-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  padding-left: 0 !important;
}

.apd-agent-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
  /* AM md-icon {margin:auto} would center the icon in the free flex space,
     shifting icon+name by a different amount per row. */
  margin: 0 !important;
}

.apd-agent-name {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
  letter-spacing: -0.1px !important;
}

.apd-cell-text {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
}

.apd-cell-truncate {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100px !important;
}

.apd-mono-text {
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}

.apd-count-badge {
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-500) !important;
  padding: 3px 10px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}


/* ── 15. Metric Bars ──────────────────────────────────────── */

.apd-metric {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: flex-start !important;
}

.apd-metric-bar {
  height: 6px !important;
  border-radius: var(--bm-r-pill) !important;
  min-width: 2px !important;
  transition: width .4s ease, background .4s ease !important;
}

.apd-metric-val {
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  font-weight: 600 !important;
}


/* ── 16. Alert Dots ───────────────────────────────────────── */

.apd-alerts-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.apd-alert-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  cursor: default !important;
  transition: transform var(--bm-t) !important;
}

.apd-alert-dot:hover { transform: scale(1.2) !important; }

/* min-width/min-height: angular-material's own md-icon default sets both
   to 24px — without overriding them too, the icon renders at 24px (too big
   for this 22px circle) despite width/height:12px above. Same fix as
   agent-details-dialog.css's .monitoring-no-alerts md-icon. */
.apd-alert-dot md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  margin: 0 !important;
}

/* CPU — info blue */
.apd-alert-dot--cpu {
  background: var(--bm-info-bg) !important;
  border: 1.5px solid var(--bm-info-border) !important;
}
.apd-alert-dot--cpu md-icon { color: var(--bm-info) !important; }

/* Memory — warning amber */
.apd-alert-dot--mem {
  background: var(--bm-warning-bg) !important;
  border: 1.5px solid var(--bm-warning-border) !important;
}
.apd-alert-dot--mem md-icon { color: var(--bm-warning) !important; }

/* Latency — error red */
.apd-alert-dot--lat {
  background: var(--bm-error-bg) !important;
  border: 1.5px solid var(--bm-error-border) !important;
}
.apd-alert-dot--lat md-icon { color: var(--bm-error) !important; }

/* Pressure — same teal used for it everywhere else (agent card badge,
   Agent Details SLA Breaches tab, stats chart). */
.apd-alert-dot--pressure {
  background: var(--bm-teal-50) !important;
  border: 1.5px solid var(--bm-teal-100) !important;
}
.apd-alert-dot--pressure md-icon { color: var(--bm-teal-600) !important; }

/* Restart needed — same red used for agents-tab.html's restart-required-badge.
   Unlike the other dots, this one is actionable (click to restart). */
.apd-alert-dot--restart {
  background: rgba(244, 67, 54, 0.12) !important;
  border: 1.5px solid rgba(244, 67, 54, 0.5) !important;
  cursor: pointer !important;
}
.apd-alert-dot--restart md-icon { color: #e53935 !important; }

/* All OK icon */
.apd-all-ok-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-success-border) !important;
}


/* ── 17. Action Buttons ───────────────────────────────────── */

.apd-actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  flex-wrap: nowrap !important;
}

.apd-actions-sep {
  width: 1px !important;
  height: 22px !important;
  background: var(--bm-border) !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
}

.apd-action-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

.apd-action-btn md-icon {
  font-size: 19px !important;
  width: 19px !important;
  height: 19px !important;
  transition: color var(--bm-t), transform var(--bm-t) !important;
}

/* Per-action icon colors */
.apd-action-btn--restart md-icon  { color: var(--apd-act-restart)  !important; }
.apd-action-btn--edit    md-icon  { color: var(--apd-act-edit)      !important; }
.apd-action-btn--stop    md-icon  { color: var(--apd-act-stop)      !important; }
.apd-action-btn--logs    md-icon  { color: var(--apd-act-logs)      !important; }
.apd-action-btn--download md-icon { color: var(--apd-act-download)  !important; }
.apd-action-btn--metrics  md-icon { color: var(--apd-act-metrics)   !important; }

/* Hover tints */
.apd-action-btn--restart:not([disabled]):hover  { background: rgba(217,119,6,.10)   !important; }
.apd-action-btn--edit:not([disabled]):hover     { background: rgba(91,108,249,.10)  !important; }
.apd-action-btn--stop:not([disabled]):hover     { background: rgba(220,38,38,.10)   !important; }
.apd-action-btn--logs:not([disabled]):hover     { background: rgba(5,150,105,.10)   !important; }
.apd-action-btn--download:not([disabled]):hover { background: rgba(118,75,162,.10)  !important; }
.apd-action-btn--metrics:not([disabled]):hover  { background: rgba(0,191,165,.10)   !important; }

.apd-action-btn:not([disabled]):hover md-icon {
  transform: scale(1.15) !important;
}

/* Disabled — clean */
.apd-action-btn[disabled] {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}
.apd-action-btn[disabled] md-icon {
  color: var(--bm-navy-100) !important;
  opacity: 1 !important;
}
.apd-action-btn[disabled]:hover md-icon { transform: none !important; }
.apd-action-btn[disabled] .md-ripple-container,
.apd-action-btn[disabled] ._md-container { display: none !important; }


/* ── 18. Exposure Icons ───────────────────────────────────── */

.apd-exposure-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  color: var(--bm-navy-100) !important;
  cursor: default !important;
}

.apd-exposure-icon--on  { color: var(--bm-success) !important; }
.apd-exposure-icon--err { color: var(--bm-error) !important; }


/* ── 19. Loading State ────────────────────────────────────── */

.apd-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 80px 40px !important;
  font-family: var(--bm-font-body) !important;
  color: var(--bm-text-muted) !important;
  font-size: 13.5px !important;
  font-style: italic !important;
  flex: 1 !important;
}

.apd-loading md-progress-circular circle {
  stroke: var(--bm-indigo-500) !important;
}


/* ── 20. Empty State ──────────────────────────────────────── */

.apd-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 40px !important;
  text-align: center !important;
  flex: 1 !important;
}

.apd-empty-icon {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--bm-indigo-50), var(--bm-violet-50, #f5f3ff)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 28px !important;
  animation: bm-apd-pulse 2.2s ease-in-out infinite !important;
}

.apd-empty-icon md-icon {
  font-size: 56px !important;
  width: 56px !important;
  height: 56px !important;
  color: var(--bm-indigo-500) !important;
}

.apd-empty-title {
  font-family: var(--bm-font-display) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.1px !important;
}

.apd-empty-desc {
  font-family: var(--bm-font-body) !important;
  font-size: 14px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin: 0 !important;
}

@keyframes bm-apd-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(8,12,24,.08); }
  50%       { transform: scale(1.05); box-shadow: 0 8px 28px rgba(91,108,249,.16); }
}


/* ── 21. Responsive ───────────────────────────────────────── */

@media (max-width: 1200px) {
  .apd-ctrl-sep { display: none !important; }
}

@media (max-width: 768px) {
  .apd-dialog {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .apd-controls-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .apd-search-wrap { max-width: 100% !important; }

  .apd-th, .apd-td { padding: 8px 10px !important; font-size: 11px !important; }

  .apd-action-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .apd-action-btn md-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* ══════════════════════════════════════════════════
   BULK-ACTION INLINE (inside controls row)
   ══════════════════════════════════════════════════ */
.apd-bulk-inline {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-end;
}

.apd-bulk-inline-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  font-family: var(--bm-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--bm-indigo-500, #5b6cf9);
  white-space: nowrap;
  animation: apd-fade-in 0.15s ease;
}

@keyframes apd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.apd-bulk-inline-count md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--bm-indigo-500, #5b6cf9) !important;
}

/* Base shared styles — matches apd-btn (Clear button) height & alignment */
.apd-bulk-inline-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  border-radius: var(--bm-r-md, 6px) !important;
  font-family: var(--bm-font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--bm-t, 160ms cubic-bezier(.4,0,.2,1)) !important;
  margin: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
}

.apd-bulk-inline-btn md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Restart — brand gradient (same as pick-db-button / btn-create) */
.apd-bulk-inline-btn--restart {
  background: var(--bm-grad-brand, linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%)) !important;
  color: var(--bm-text-inverse, #ffffff) !important;
  box-shadow: 0 2px 6px rgba(91, 108, 249, 0.22) !important;
}

.apd-bulk-inline-btn--restart:not([disabled]):hover {
  box-shadow: 0 4px 12px rgba(91, 108, 249, 0.36) !important;
  transform: translateY(-1px) !important;
}

/* Stop — surface + strong border (same as btn-cancel) */
.apd-bulk-inline-btn--stop {
  background: var(--bm-surface, #ffffff) !important;
  color: var(--bm-text-secondary, #4b5878) !important;
  border: 1.5px solid var(--bm-border-strong, #c5ccdf) !important;
}

.apd-bulk-inline-btn--stop:not([disabled]):hover {
  background: var(--bm-surface-2, #f7f8fc) !important;
  border-color: var(--bm-navy-300, #8e97b4) !important;
}

/* Disabled state for both */
.apd-bulk-inline-btn[disabled] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.apd-bulk-inline-spinner {
  margin-left: 2px !important;
  flex-shrink: 0 !important;
}

.apd-bulk-inline-spinner svg path,
.apd-bulk-inline-spinner svg circle {
  stroke: var(--bm-indigo-500, #5b6cf9) !important;
}

/* ══════════════════════════════════════════════════
   CHECKBOXES
   ══════════════════════════════════════════════════ */
.apd-th--checkbox,
.apd-td--checkbox {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

.apd-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Hide native checkbox */
.apd-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.apd-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #fff;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
}

.apd-checkbox-wrap:hover .apd-checkbox-box {
  border-color: var(--bm-teal-500, #00BFA5);
  box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.15);
}

/* Checked state – driven by ng-class on the sibling span via JS toggle */
.apd-checkbox:checked + .apd-checkbox-box,
.apd-row--selected .apd-td--checkbox .apd-checkbox-box {
  background: var(--bm-teal-500, #00BFA5);
  border-color: var(--bm-teal-500, #00BFA5);
}

.apd-checkbox-box md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: #fff !important;
}

/* Indeterminate dash */
.apd-checkbox-box--indeterminate {
  background: var(--bm-teal-500, #00BFA5) !important;
  border-color: var(--bm-teal-500, #00BFA5) !important;
}

/* Selected row highlight */
.apd-row--selected {
  background: var(--bm-teal-50, #E6FAF7) !important;
}

.apd-row--selected:hover {
  background: rgba(0, 191, 165, 0.10) !important;
}