/* =====================================================
   AGENT STATS DIALOG - Metrics History & Charts
   ===================================================== */

/* ✅ CRITICAL: Deshabilitar TODAS las animaciones de Angular Material dentro del dialog */
.agent-stats-dialog .ng-hide-add,
.agent-stats-dialog .ng-hide-remove,
.agent-stats-dialog .ng-enter,
.agent-stats-dialog .ng-leave,
.agent-stats-dialog .ng-move {
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -webkit-animation: none !important;
}


/* ✅ Asegurar que ng-hide funcione inmediatamente */
.agent-stats-dialog .ng-hide {
  display: none !important;
}


/* Variables compartidas */
:root {
  --agent-primary: #667eea;
  --agent-primary-dark: #5568d3;
  --agent-success: #4caf50;
  --agent-error: #f44336;
  --agent-warning: #ff9800;
  --agent-text: #2c3e50;
  --agent-text-secondary: #64748b;
  --agent-border: #e0e0e0;
  --agent-bg-light: #f8f9fa;
}


/* ===== BASE DIALOG ===== */
.agent-stats-dialog {
  width: 1440px !important;
  max-width: 95vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}


/* ===== TOOLBAR (Compartido) ===== */
:where(.agent-stats-dialog) .agent-toolbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  min-height: 64px !important;
  max-height: 64px !important;
}

:where(.agent-stats-dialog) .agent-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

:where(.agent-stats-dialog) .agent-toolbar .agent-icon {
  color: white !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

:where(.agent-stats-dialog) .agent-toolbar .agent-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

:where(.agent-stats-dialog) .agent-toolbar .agent-header-info h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: white !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

:where(.agent-stats-dialog) .agent-toolbar .agent-subtitle {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
}

.agent-toolbar .md-icon-button {
  color: white !important;
  margin: 0 !important;
}

.agent-toolbar .md-icon-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
}


/* ===== CONTENT ===== */
.agent-stats-content {
  display: flex !important;
  flex-direction: column !important;
  height: calc(95vh - 64px) !important;
  max-height: calc(95vh - 64px) !important;
  overflow: hidden !important;
  padding: 24px !important;
  background: var(--agent-bg-light) !important;
}


/* ===== LOADING & EMPTY STATES ===== */
:where(.agent-stats-dialog) .loading-overlay,
.agent-stats-dialog .empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.agent-stats-content .loading-overlay,
.agent-stats-content .empty-state {
  flex: 1 !important;
  min-height: 500px !important;
}

:where(.agent-stats-dialog) .loading-overlay p,
.agent-stats-dialog .empty-state p {
  margin-top: 16px !important;
  color: var(--agent-text-secondary) !important;
  font-size: 14px !important;
}

.agent-stats-dialog .empty-state md-icon {
  font-size: 64px !important;
  width: 64px !important;
  height: 64px !important;
  color: #ddd !important;
  margin-bottom: 16px !important;
}

.agent-stats-dialog .empty-state h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--agent-text) !important;
  margin: 0 0 8px 0 !important;
}

.agent-stats-dialog .empty-state p {
  margin: 0 !important;
}


/* ===== BODY (panel izquierdo de instancias + panel derecho de chart) ===== */
:where(.agent-stats-dialog) .agent-stats-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}


/* ===== INSTANCE SIDEBAR (HA) ===== */
:where(.agent-stats-dialog) .instance-sidebar {
  width: 220px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  overflow-y: auto !important;
}

:where(.agent-stats-dialog) .instance-sidebar-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px !important;
  border-bottom: 2px solid var(--agent-border) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--agent-text-secondary) !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .instance-sidebar-header md-icon {
  color: var(--agent-primary) !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

:where(.agent-stats-dialog) .instance-sidebar-list {
  overflow-y: auto !important;
  padding: 8px !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  margin-bottom: 2px !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item:hover {
  background: var(--agent-bg-light) !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item--active {
  background: rgba(102, 126, 234, 0.12) !important;
}


/* Nodo raíz del árbol ("Agent") — mismo look and feel que Agent Details. */
:where(.agent-stats-dialog) .instance-sidebar-item--root {
  font-weight: 700 !important;
}

:where(.agent-stats-dialog) .instance-sidebar-tree-children {
  margin-left: 18px !important;
  padding-left: 10px !important;
  border-left: 2px solid var(--agent-border) !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item--child {
  position: relative !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item--child::before {
  content: '' !important;
  position: absolute !important;
  left: -10px !important;
  top: 50% !important;
  width: 8px !important;
  height: 2px !important;
  background: var(--agent-border) !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item md-icon {
  color: var(--agent-text-secondary) !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item-label {
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--agent-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--agent-text-secondary) !important;
  background: var(--agent-bg-light) !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
}

:where(.agent-stats-dialog) .instance-sidebar-item-status {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.instance-sidebar-item-status--running { background: #4caf50 !important; }
.instance-sidebar-item-status--draining { background: #efd747 !important; }
.instance-sidebar-item-status--drained { background: #e53935 !important; }


/* ===== CHART SECTION ===== */
:where(.agent-stats-dialog) .chart-section {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 24px !important;
  padding-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 0 !important;
  overflow-y: auto !important;
  min-width: 0 !important;
}

:where(.agent-stats-dialog) .chart-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--agent-border) !important;
  flex-shrink: 0 !important;
  min-height: 60px !important;
}

:where(.agent-stats-dialog) .chart-header md-icon {
  color: var(--agent-primary) !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
}

:where(.agent-stats-dialog) .chart-header h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--agent-text) !important;
  margin: 0 !important;
  flex: 1 !important;
}

:where(.agent-stats-dialog) .chart-header .chart-subtitle {
  font-size: 13px !important;
  color: var(--agent-text-secondary) !important;
  font-weight: 500 !important;
  margin-right: 12px !important;
}


/* ===== LIVE MONITORING TOGGLE ===== */
:where(.agent-stats-dialog) .live-toggle-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: white !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  margin-right: 12px !important;
  transition: all 0.3s ease !important;
}

.live-toggle-container:has(.live-switch.md-checked) {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
  border-color: #ff9800 !important;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2) !important;
}

:where(.agent-stats-dialog) .live-switch {
  margin: 0 !important;
  min-width: 36px !important;
}

:where(.agent-stats-dialog) .live-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--agent-text) !important;
  white-space: nowrap !important;
}

.live-toggle-container:has(.live-switch.md-checked) .live-label {
  color: #e65100 !important;
}


/* ===== LIVE MONITORING INDICATOR - ACTUALIZADO CON REFRESH INTERVAL ===== */
:where(.agent-stats-dialog) .live-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
  animation: pulse-live 2s ease-in-out infinite !important;
}

:where(.agent-stats-dialog) .live-indicator md-progress-circular {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .live-indicator md-progress-circular svg path {
  stroke: white !important;
}

:where(.agent-stats-dialog) .live-indicator .live-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}


/* ✅ NUEVO: Separador visual entre "Live Monitoring" y el refresh interval */
:where(.agent-stats-dialog) .live-indicator .live-separator {
  width: 2px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}


/* ✅ NUEVO: Icono de reloj para refresh interval */
:where(.agent-stats-dialog) .live-indicator .refresh-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: white !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}


/* ✅ NUEVO: Intervalo de refresco en segundos */
:where(.agent-stats-dialog) .live-indicator .refresh-interval {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: white !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  font-family: 'Courier New', Consolas, monospace !important;
}

@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.6);
  }
}


/* ===== LIVE MODE BADGE (para controles deshabilitados) ===== */
.live-mode-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: auto !important;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3) !important;
}

.live-mode-badge md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: white !important;
}


/* ===== CONTROLES DESHABILITADOS EN LIVE MODE ===== */
:where(.agent-stats-dialog) .disabled-control {
  opacity: 0.6 !important;
  pointer-events: none !important;
  position: relative !important;
}

:where(.agent-stats-dialog) .disabled-control::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important;
  z-index: 1 !important;
}

.disabled-control .live-mode-badge {
  z-index: 2 !important;
  position: relative !important;
}


/* ===== CLOSE BUTTON EN HEADER ===== */
:where(.agent-stats-dialog) .close-dialog-btn-header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  height: 36px !important;
  min-width: 100px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%) !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(239, 83, 80, 0.3) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .close-dialog-btn-header:hover {
  background: linear-gradient(135deg, #e53935 0%, #d32f2f 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(239, 83, 80, 0.4) !important;
}

:where(.agent-stats-dialog) .close-dialog-btn-header:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(239, 83, 80, 0.3) !important;
}

:where(.agent-stats-dialog) .close-dialog-btn-header md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: white !important;
  margin: 0 !important;
}


/* ===== ÁREA DE CONTENIDO PRINCIPAL (Chart/Empty/Loading) ===== */
:where(.agent-stats-dialog) .chart-content-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  min-height: 550px !important;
  max-height: 550px !important;
  margin-bottom: 16px !important;
}


/* ✅ CRITICAL: Deshabilitar animaciones de Angular Material para ng-hide/ng-show */
.chart-content-area .ng-hide-add,
.chart-content-area .ng-hide-remove {
  transition: none !important;
  animation: none !important;
}


/* ✅ ACTUALIZADO: Sin padding ni margin para eliminar gaps */
:where(.agent-stats-dialog) .chart-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ✅ Cuando está oculto con ng-show - SIN ANIMACIONES */
.chart-container.ng-hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ✅ FORCE: Sin transiciones ni animaciones en el container */
.chart-container.ng-hide-add,
.chart-container.ng-hide-remove {
  transition: none !important;
  animation: none !important;
  display: none !important;
}


/* ✅ ACTUALIZADO: Canvas sin padding ni margin */
:where(.agent-stats-dialog) .chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===== NO DATA MESSAGE - MEJORADO ===== */
:where(.agent-stats-dialog) .no-data-message-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 60px 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ✅ Cuando está oculto con ng-show */
.no-data-message-wrapper.ng-hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ✅ FORCE: Sin transiciones ni animaciones */
.no-data-message-wrapper.ng-hide-add,
.no-data-message-wrapper.ng-hide-remove {
  transition: none !important;
  animation: none !important;
  display: none !important;
}


/* ===== LOADING STATE PARA CHART ===== */
:where(.agent-stats-dialog) .chart-loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  z-index: 10 !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ✅ Cuando está oculto con ng-show */
.chart-loading-overlay.ng-hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ✅ FORCE: Sin transiciones ni animaciones */
.chart-loading-overlay.ng-hide-add,
.chart-loading-overlay.ng-hide-remove {
  transition: none !important;
  animation: none !important;
  display: none !important;
}

:where(.agent-stats-dialog) .chart-loading-overlay p {
  margin-top: 16px !important;
  color: var(--agent-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

:where(.agent-stats-dialog) .no-data-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 500px !important;
}

:where(.agent-stats-dialog) .no-data-icon {
  font-size: 72px !important;
  width: 72px !important;
  height: 72px !important;
  color: #ef5350 !important;
  margin-bottom: 20px !important;
}

:where(.agent-stats-dialog) .no-data-message h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #d32f2f !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
}

:where(.agent-stats-dialog) .no-data-message p {
  font-size: 15px !important;
  color: #757575 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}


/* ===== TIME RANGE CONTROL (rzSlider) ===== */
:where(.agent-stats-dialog) .time-range-control {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 2px solid #e8ecff;
  flex-shrink: 0;
}

:where(.agent-stats-dialog) .time-range-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--agent-border);
}

:where(.agent-stats-dialog) .time-range-header md-icon {
  color: var(--agent-primary);
  font-size: 22px;
  width: 22px;
  height: 22px;
}

:where(.agent-stats-dialog) .time-range-header span {
  font-size: 14px;
  font-weight: 700;
  color: var(--agent-text);
  flex: 1;
}

.reset-range-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #e65100;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-range-btn:hover {
  background: #ffe0b2;
  transform: translateY(-1px);
}

.reset-range-btn md-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #e65100;
}

:where(.agent-stats-dialog) .rz-slider-container {
  padding: 20px 20px 25px 20px;
  margin: 0;
  background: #f5f5f5;
  border-radius: 4px;
}


/* Validation Warning */
:where(.agent-stats-dialog) .time-range-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 6px;
  color: #e65100;
  font-size: 12px;
  font-weight: 600;
}

:where(.agent-stats-dialog) .time-range-warning md-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #ff9800;
}


/* Quick Presets */
:where(.agent-stats-dialog) .time-range-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}

:where(.agent-stats-dialog) .presets-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-right: 8px;
}

:where(.agent-stats-dialog) .preset-range-btn {
  padding: 6px 12px;
  background: white;
  border: 2px solid var(--agent-border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--agent-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(.agent-stats-dialog) .preset-range-btn:hover:not([disabled]) {
  border-color: var(--agent-primary);
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-1px);
}

:where(.agent-stats-dialog) .preset-range-btn.active {
  background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-dark) 100%) !important;
  color: white !important;
  border-color: var(--agent-primary) !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
}

:where(.agent-stats-dialog) .preset-range-btn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ===== TIME INTERVAL CONTROL ===== */
:where(.agent-stats-dialog) .time-interval-control {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #f8f9ff 0%, #fafbff 100%) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  border: 1px solid #e8ecff !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .interval-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  color: var(--agent-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-width: 140px !important;
}

:where(.agent-stats-dialog) .interval-label md-icon {
  color: var(--agent-primary) !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

:where(.agent-stats-dialog) .interval-slider-wrapper {
  flex: 1;
  padding: 10px;
  min-width: 300px;
}

:where(.agent-stats-dialog) .interval-presets {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .preset-btn {
  padding: 8px 14px !important;
  background: white !important;
  border: 2px solid var(--agent-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--agent-text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 45px !important;
  text-align: center !important;
}

:where(.agent-stats-dialog) .preset-btn:hover:not([disabled]) {
  border-color: var(--agent-primary) !important;
  background: rgba(102, 126, 234, 0.05) !important;
  transform: translateY(-1px) !important;
}

:where(.agent-stats-dialog) .preset-btn.active {
  background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-dark) 100%) !important;
  color: white !important;
  border-color: var(--agent-primary) !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
}

:where(.agent-stats-dialog) .preset-btn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ✅ NUEVO: Clase .disabled para visualización inmediata */
:where(.agent-stats-dialog) .preset-btn.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f5f5f5 !important;
  color: #bdbdbd !important;
  border-color: #e0e0e0 !important;
}

:where(.agent-stats-dialog) .interval-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

:where(.agent-stats-dialog) .interval-loading md-progress-circular {
  width: 20px !important;
  height: 20px !important;
}


/* ===== PAGINATION CONTROLS - LAYOUT MEJORADO ===== */
:where(.agent-stats-dialog) .pagination-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 20px !important;
  background: white !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  height: auto !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  border-top: 1px solid var(--agent-border) !important;
  position: relative !important;
}


/* ===== PAGE SIZE CONTROLS (izquierda) ===== */
:where(.agent-stats-dialog) .page-size-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

:where(.agent-stats-dialog) .page-size-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--agent-text-secondary) !important;
  margin-right: 4px !important;
}

:where(.agent-stats-dialog) .page-size-btn {
  padding: 6px 12px !important;
  background: white !important;
  border: 2px solid var(--agent-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--agent-text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 40px !important;
  text-align: center !important;
}

:where(.agent-stats-dialog) .page-size-btn:hover {
  border-color: var(--agent-primary) !important;
  background: rgba(102, 126, 234, 0.05) !important;
  transform: translateY(-1px) !important;
}

:where(.agent-stats-dialog) .page-size-btn.active {
  background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-dark) 100%) !important;
  color: white !important;
  border-color: var(--agent-primary) !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
}


/* ===== PAGE NAVIGATION (centro) ===== */
:where(.agent-stats-dialog) .page-navigation {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

:where(.agent-stats-dialog) .pagination-btn {
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

:where(.agent-stats-dialog) .pagination-btn:not([disabled]):hover {
  background: rgba(102, 126, 234, 0.1) !important;
}

:where(.agent-stats-dialog) .pagination-btn[disabled] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}



:where(.agent-stats-dialog) .pagination-btn[disabled] md-icon {
  color: #999 !important;
}



:where(.agent-stats-dialog) .page-indicator strong {
  color: var(--agent-text) !important;
  font-weight: 600 !important;
}


/* ===== rzSlider STYLES ===== */
.rzslider {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 4px;
  margin: 35px 0 10px 0;
  vertical-align: middle;
  user-select: none;
}

.rzslider .rz-bar {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
}

.rzslider .rz-selection {
  position: absolute;
  background: linear-gradient(90deg, #667eea 0%, #4caf50 100%);
  height: 4px;
  border-radius: 2px;
}


/* Pointer estilo picker profesional (línea vertical con círculo en la punta) —
   mismas dimensiones que el pointer de referencia en Metrics Explorer
   (metrics-explorer-dialog.css .rz-pointer). Igual que ahí, hace falta
   !important + selector scopeado al contenedor: el default de la librería
   (index.html -> rzslider.min.css, cargado por CDN) define .rz-pointer
   como un círculo de 32x32 con el mismo peso de especificidad que esta
   regla, y sin !important esa regla nuestra pierde el empate y termina
   ganando el círculo por defecto de la librería. */
.rz-slider-container .rzslider .rz-pointer,
.interval-slider-wrapper .rzslider .rz-pointer {
  position: absolute !important;
  width: 8px !important;
  height: 34px !important;
  top: -15px !important;
  background: linear-gradient(180deg, #667eea 0%, #5568d3 100%) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.6) !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: all 0.2s ease !important;
}


/* Círculo en la punta (arriba) */
.rz-slider-container .rzslider .rz-pointer::before,
.interval-slider-wrapper .rzslider .rz-pointer::before {
  content: '' !important;
  position: absolute !important;
  top: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: #667eea !important;
  border: 1.5px solid white !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.2s ease !important;
}


/* Neutraliza el ::after del default de la librería (punto blanco interno del
   círculo de 32x32) para que no quede flotando encima de nuestro dial. */
.rz-slider-container .rzslider .rz-pointer::after,
.interval-slider-wrapper .rzslider .rz-pointer::after {
  content: none !important;
}

.rz-slider-container .rzslider .rz-pointer:hover,
.interval-slider-wrapper .rzslider .rz-pointer:hover {
  transform: scaleY(1.1) scaleX(1.3) !important;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.8) !important;
}

.rz-slider-container .rzslider .rz-pointer:hover::before,
.interval-slider-wrapper .rzslider .rz-pointer:hover::before {
  transform: translateX(-50%) scale(1.1) !important;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.7) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-active,
.interval-slider-wrapper .rzslider .rz-pointer.rz-active {
  transform: scaleY(1.15) scaleX(1.4) !important;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.9) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-active::before,
.interval-slider-wrapper .rzslider .rz-pointer.rz-active::before {
  transform: translateX(-50%) scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.8) !important;
}


/* Pointer derecho (verde) - Fecha "To" */
.rz-slider-container .rzslider .rz-pointer.rz-max-h,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h {
  background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%) !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.6) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-max-h::before,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h::before {
  background: #4caf50 !important;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.5) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-max-h:hover,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h:hover {
  box-shadow: 0 3px 12px rgba(76, 175, 80, 0.8) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-max-h:hover::before,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h:hover::before {
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.7) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-max-h.rz-active,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h.rz-active {
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.9) !important;
}

.rz-slider-container .rzslider .rz-pointer.rz-max-h.rz-active::before,
.interval-slider-wrapper .rzslider .rz-pointer.rz-max-h.rz-active::before {
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.8) !important;
}


/* rzSlider - Bubbles mejorados */
.rzslider .rz-bubble {
  position: absolute;
  bottom: 25px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  background: white;
  color: #2c3e50;
  border: 2px solid #667eea;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.3px;
}


/* Ocultar los bubbles de floor y ceil (límites) para evitar círculos extras */
.rzslider .rz-bubble.rz-limit {
  display: none !important;
}

.rzslider .rz-bubble.rz-limit.rz-ceil {
  border-color: #4caf50;
  display: none !important;
}

.rzslider .rz-active .rz-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
}

.interval-slider-wrapper .rzslider .rz-bubble {
  border-color: #2196f3;
}

.interval-slider-wrapper .rzslider .rz-active .rz-bubble {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  color: white;
  border-color: #2196f3;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  :where(.agent-stats-dialog) .time-interval-control {
    flex-wrap: wrap !important;
  }

  :where(.agent-stats-dialog) .interval-slider-wrapper {
    flex: 1 1 100% !important;
    order: 2 !important;
  }

  :where(.agent-stats-dialog) .interval-presets {
    order: 3 !important;
  }
}

@media (max-width: 768px) {
  .job-instances-dialog {
    min-width: 95vw !important;
  }
}


/* ===== METRICS + THRESHOLDS FILTER ROW ===== */
:where(.agent-stats-dialog) .metrics-filter-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 0 16px 0 !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .metrics-filter-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

:where(.agent-stats-dialog) .thresholds-filter-bar {
  border-top: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

:where(.agent-stats-dialog) .metrics-filter-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--agent-text-secondary) !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}


/* ── "Show metrics" / "SLA thresholds" dropdowns (2026-09-19) — compact
   pill-style trigger matching .metrics-bulk-btn's own look, instead of
   Angular Material's default full-height underlined select. ── */
:where(.agent-stats-dialog) .metrics-dropdown-select {
  margin: 0 !important;
  min-width: 150px !important;
}
.metrics-dropdown-select .md-select-value {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e0e0e0 !important;
  background: white !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #616161 !important;
  border-bottom: 1.5px solid #e0e0e0 !important;
}
.metrics-dropdown-select .md-select-value.md-select-placeholder {
  color: #9e9e9e !important;
}
.metrics-dropdown-select md-icon.md-select-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 0 0 4px !important;
}


/* Disabled state ("SLA thresholds" with no options — nothing SLA-monitored,
   or its metric currently hidden from "Show metrics") — the base rule above
   sets background/border/color unconditionally with !important, which would
   otherwise mask Angular Material's own [disabled] dimming entirely. */
.metrics-dropdown-select[disabled] .md-select-value {
  opacity: .5 !important;
  cursor: not-allowed !important;
  background: #f0f0f0 !important;
}
.metrics-dropdown-select[disabled] md-icon.md-select-icon {
  opacity: .5 !important;
}


/* Primer md-select[multiple] de la app (2026-09-19) — el checkbox de cada
   md-option se posiciona absolute contra .md-container, y normalmente
   .md-text trae su propio padding-left para dejarle lugar; algún reset
   global de la app lo deja en 0px, así que el checkbox termina pisando la
   primera letra del label (reportado: "se ve feo"/overlap confirmado vía
   getBoundingClientRect: checkbox 395.7-413.7px vs texto arrancando en
   401px). Se corrige acá, scopeado al panel, en vez de tocar el reset global. */
.metrics-dropdown-panel md-option .md-text {
  padding-left: 48px !important;
}


/* El highlight celeste default de Material en la opción seleccionada
   (aria-selected) es normal, pero sin el padding de arriba se leía como
   "toda la fila pintada" encima del checkbox atropellado. Con el padding
   corregido alcanza con suavizarlo un poco. */
.metrics-dropdown-panel md-option[aria-selected="true"] {
  background-color: rgba(94, 53, 177, 0.06) !important;
}


/* md-option trae md-ink-ripple (efecto Material default al hacer click) —
   sin un color de ripple propio configurado en el tema de esta app, pinta
   la fila entera de negro por ~1-2s antes de asentarse en el estado
   seleccionado ("se pinta" reportado). Es puramente cosmético — se
   deshabilita ocultando el contenedor que la directiva arma en cada click,
   el checkbox ya comunica la selección sin necesidad del ripple. */
.metrics-dropdown-panel md-option .md-ripple-container {
  display: none !important;
}

:where(.agent-stats-dialog) .metrics-bulk-btn {
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 14px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #3949ab !important;
  background: #f5f5f7 !important;
  border: 1.5px dashed #bdbdbd !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
:where(.agent-stats-dialog) .metrics-bulk-btn:hover:not([disabled]) {
  background: rgba(57, 73, 171, .10) !important;
  border-color: #3949ab !important;
}
:where(.agent-stats-dialog) .metrics-bulk-btn[disabled] {
  opacity: .4 !important;
  cursor: not-allowed !important;
}