/* ================================================================
   EXECUTION HISTORY DIALOG — job-instances-dialog.css
   Same design tokens/shell/rzslider theming as biz-interceptors'
   metrics-explorer-dialog.css (jix- prefixed instead of mex-) — this
   dialog is the job-scheduler analog of that one (aggregated time-series
   chart + time-range/interval pickers + Live Monitoring + resolution/
   pagination), just without an environment nav (a job execution isn't
   scoped to one).
   ================================================================ */

.job-instances-dialog {
  --jix-indigo-600: #4756e8;
  --jix-indigo-500: #5b6cf9;
  --jix-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);
  --jix-surface:    #FFFFFF;
  --jix-surface-2:  #F7F8FC;
  --jix-text-primary:   #111827;
  --jix-text-secondary: #4B5878;
  --jix-text-muted:     #8E97B4;
  --jix-border:        #E2E5EF;
  --jix-border-strong: #C5CCDF;
  --jix-red:          #DC2626;
  --jix-r-sm: 4px;
  --jix-r-md: 6px;
  --jix-r-xl: 14px;
  --jix-t: 160ms cubic-bezier(.4,0,.2,1);

  width: 1180px !important;
  max-width: 95vw !important;
  height: 900px !important;
  max-height: 92vh !important;
  border-radius: var(--jix-r-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(8,12,24,.22) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── Toolbar ──────────────────────────────────────────────── */

body md-dialog.job-instances-dialog md-toolbar.jix-toolbar {
  background: var(--jix-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 60px !important;
  max-height: 60px !important;
  flex-shrink: 0 !important;
}

body md-dialog.job-instances-dialog .md-toolbar-tools {
  padding: 0 18px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.jix-toolbar-icon {
  color: #fff !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.jix-header-info {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 2px !important; min-width: 0 !important; text-align: left !important;
}
.jix-header-info h2 {
  font-size: 16px !important; font-weight: 600 !important; color: #fff !important;
  margin: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: left !important;
}
.jix-header-subtitle {
  font-size: 11.5px !important; color: rgba(255,255,255,.8) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  text-align: left !important; width: 100% !important;
}

body md-dialog.job-instances-dialog .md-toolbar-tools > .md-icon-button {
  color: #fff !important; margin: 0 !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important;
  border-radius: var(--jix-r-md) !important;
}
body md-dialog.job-instances-dialog .md-toolbar-tools > .md-icon-button md-icon { color: rgba(255,255,255,.75) !important; font-size: 18px !important; width: 18px !important; height: 18px !important; }
body md-dialog.job-instances-dialog .md-toolbar-tools > .md-icon-button:hover md-icon { color: #fff !important; }
body md-dialog.job-instances-dialog .md-toolbar-tools > .md-icon-button:hover { background: rgba(255,255,255,.12) !important; }

/* ── Content shell ────────────────────────────────────────── */

.jix-content {
  padding: 0 !important;
  background: var(--jix-surface-2) !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  display: flex !important;
}

.jix-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* ── Explorer panel — no environment nav here, so this is the whole body ── */

.jix-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
}

.jix-loading-overlay, .jix-chart-loading-overlay, .jix-empty-wrapper {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; gap: 12px !important; color: var(--jix-text-secondary) !important; font-size: 13px !important; text-align: center !important;
}
.jix-loading-overlay { padding: 80px 24px !important; }
.jix-empty-wrapper {
  padding: 40px 24px !important; height: 100% !important; box-sizing: border-box !important;
  background: var(--jix-surface) !important; border: 1px solid var(--jix-border) !important; border-radius: var(--jix-r-md) !important;
}
.jix-empty-icon { font-size: 40px !important; width: 40px !important; height: 40px !important; color: var(--jix-text-muted) !important; margin: 0 auto !important; }
.jix-empty-title { font-size: 14px !important; font-weight: 700 !important; color: var(--jix-text-primary) !important; width: 100%; margin: 0 !important; }
.jix-empty-text { max-width: 380px !important; line-height: 1.5 !important; margin: 0 auto !important; }

/* ── Disabled state — job has never executed, so time-range/interval/
   metric controls have nothing to query against. Kept visible (not
   hidden) so it's clear these are real controls, just inert until
   there's data. ── */
.jix-disabled-block { opacity: .5 !important; pointer-events: none !important; }

/* ── Section header ───────────────────────────────────────── */

.jix-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(--jix-border) !important; flex-shrink: 0 !important; min-height: 44px !important;
}
.jix-chart-header md-icon {
  color: var(--jix-indigo-500) !important; font-size: 26px !important; width: 26px !important; height: 26px !important;
  min-width: 26px !important; min-height: 26px !important; margin: 0 !important;
}
.jix-chart-header h3 {
  font-size: 17px !important; font-weight: 700 !important; color: var(--jix-text-primary) !important;
  margin: 0 !important; flex: 1 !important;
}
.jix-chart-subtitle {
  font-size: 12.5px !important; color: var(--jix-text-secondary) !important; font-weight: 500 !important; margin-right: 4px !important;
}

/* ── Live Monitoring toggle + indicator — same orange "live" language
   used across every stats/metrics dialog in the app. ─────────────── */

.jix-live-toggle-container {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 6px 12px !important; background: var(--jix-surface) !important;
  border: 2px solid var(--jix-border) !important; border-radius: var(--jix-r-md) !important;
  flex-shrink: 0 !important; transition: all var(--jix-t) !important;
}
.jix-live-toggle-container:has(.jix-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,.2) !important;
}
.jix-live-switch { margin: 0 !important; min-width: 36px !important; }
.jix-live-label {
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--jix-text-primary) !important;
  white-space: nowrap !important;
}
.jix-live-toggle-container:has(.jix-live-switch.md-checked) .jix-live-label { color: #e65100 !important; }

.jix-live-indicator {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 7px 14px !important; background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
  border-radius: var(--jix-r-md) !important; box-shadow: 0 2px 8px rgba(255,152,0,.3) !important;
  flex-shrink: 0 !important; animation: jix-pulse-live 2s ease-in-out infinite !important;
}
.jix-live-indicator md-progress-circular { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
.jix-live-indicator md-progress-circular svg path { stroke: #fff !important; }
.jix-live-indicator .jix-live-text {
  font-size: 12.5px !important; font-weight: 700 !important; color: #fff !important;
  text-transform: uppercase !important; letter-spacing: .5px !important; white-space: nowrap !important;
}

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

/* ── Metrics filter row ───────────────────────────────────── */

.jix-metrics-filter-row {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px 8px !important;
  margin-bottom: 14px !important;
  max-width: 640px !important;
}
.jix-metrics-filter-label {
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--jix-text-secondary) !important;
  white-space: nowrap !important; margin-right: 2px !important;
}

/* background/border/color are deliberately NOT !important here — the
   active state's per-metric color is set as an inline style (ng-style)
   in the template, and a plain inline style only wins over a stylesheet
   rule when that rule isn't !important. */
.jix-metric-toggle {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 4px 9px !important; border-radius: 14px !important;
  font-size: 11px !important; font-weight: 600 !important; color: #9e9e9e;
  background: var(--jix-surface); border: 1.5px solid var(--jix-border);
  cursor: pointer !important; user-select: none !important; transition: all var(--jix-t) !important;
}
.jix-metric-toggle:hover { border-color: var(--jix-border-strong) !important; background: var(--jix-surface-2) !important; }
.jix-metric-toggle input { display: none !important; }
.jix-metric-toggle md-icon {
  font-size: 13px !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important;
  margin: 0 !important; color: inherit !important; flex-shrink: 0 !important;
}

.jix-metrics-bulk-btn {
  height: 24px !important; padding: 0 9px !important; border-radius: 14px !important;
  font-size: 10.5px !important; font-weight: 600 !important; color: var(--jix-indigo-600) !important;
  background: var(--jix-surface-2) !important; border: 1.5px dashed var(--jix-border-strong) !important;
  cursor: pointer !important; transition: all var(--jix-t) !important;
}
.jix-metrics-bulk-btn:hover:not([disabled]) { background: rgba(91,108,249,.10) !important; border-color: var(--jix-indigo-500) !important; }
.jix-metrics-bulk-btn[disabled] { opacity: .4 !important; cursor: not-allowed !important; }

/* ── Chart area ───────────────────────────────────────────── */

.jix-chart-content-area {
  position: relative !important;
  height: 400px !important;
  margin-bottom: 18px !important;
  background: var(--jix-surface) !important;
  border: 1px solid var(--jix-border) !important;
  border-radius: var(--jix-r-md) !important;
}
.jix-chart-loading-overlay { position: absolute !important; inset: 0 !important; background: rgba(255,255,255,.85) !important; z-index: 2 !important; }
.jix-chart-container { width: 100% !important; height: 100% !important; padding: 12px !important; box-sizing: border-box !important; }
.jix-chart-container canvas { width: 100% !important; height: 100% !important; }

/* ── Controls (time range / interval) ────────────────────── */

.jix-control {
  background: var(--jix-surface) !important; border: 1px solid var(--jix-border) !important;
  border-radius: var(--jix-r-md) !important; padding: 14px 18px 10px !important; margin-bottom: 14px !important;
}
.jix-control-header {
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-size: 12px !important; font-weight: 700 !important; color: var(--jix-text-primary) !important;
  margin-bottom: 4px !important;
}
.jix-control-header md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important;
  margin: 0 !important; color: var(--jix-indigo-500) !important;
}

.jix-reset-range-btn {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  margin-left: auto !important; padding: 3px 10px !important; border-radius: 12px !important;
  font-size: 10.5px !important; font-weight: 600 !important; color: var(--jix-indigo-600) !important;
  background: var(--jix-surface-2) !important; border: 1px solid var(--jix-border) !important;
  cursor: pointer !important; transition: all var(--jix-t) !important;
}
.jix-reset-range-btn:hover { background: rgba(91,108,249,.10) !important; border-color: var(--jix-indigo-500) !important; }
.jix-reset-range-btn md-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; margin: 0 !important; color: inherit !important; }

.jix-control-warning {
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-size: 11.5px !important; color: var(--jix-red) !important; margin: 4px 0 !important;
}
.jix-control-warning md-icon { font-size: 15px !important; width: 15px !important; height: 15px !important; color: var(--jix-red) !important; }

.jix-rz-slider-container { padding: 0 6px !important; }

.jix-presets {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important;
}
.jix-presets-label { font-size: 11px !important; font-weight: 700 !important; color: var(--jix-text-muted) !important; margin-right: 2px !important; }

.jix-preset-btn {
  height: 26px !important; padding: 0 10px !important; border-radius: 14px !important;
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--jix-text-secondary) !important;
  background: var(--jix-surface-2) !important; border: 1px solid var(--jix-border) !important;
  cursor: pointer !important; transition: all var(--jix-t) !important;
}
.jix-preset-btn:hover:not([disabled]) { background: var(--jix-surface) !important; border-color: var(--jix-border-strong) !important; }
.jix-preset-btn--active {
  background: rgba(91,108,249,.12) !important; border-color: var(--jix-indigo-500) !important; color: var(--jix-indigo-600) !important;
}
.jix-preset-btn[disabled] { opacity: .4 !important; cursor: not-allowed !important; }

/* ── Aggregation Interval — single horizontal row (label | slider |
   presets). ── */

.jix-interval-control {
  display: flex !important; align-items: center !important; gap: 16px !important;
  padding: 12px 18px !important; background: var(--jix-surface-2) !important;
  border: 1px solid var(--jix-border) !important; border-radius: var(--jix-r-md) !important; margin-bottom: 14px !important;
}
.jix-interval-label {
  display: flex !important; align-items: center !important; gap: 6px !important;
  white-space: nowrap !important; min-width: 150px !important; flex-shrink: 0 !important;
  font-size: 12px !important; font-weight: 700 !important; color: var(--jix-text-primary) !important;
}
.jix-interval-label md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important;
  margin: 0 !important; color: var(--jix-indigo-500) !important;
}
.jix-interval-slider-wrapper { flex: 1 1 auto !important; min-width: 180px !important; padding: 0 6px !important; }
.jix-interval-presets { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }

/* ── rzslider theming (indigo/purple, matching jix-grad-brand) ── */

.jix-rz-slider-container .rzslider {
  position: relative !important; display: inline-block !important; width: 100% !important; height: 4px !important;
  margin: 30px 0 10px !important; vertical-align: middle !important; user-select: none !important;
}
.jix-rz-slider-container .rzslider .rz-bar { position: absolute !important; width: 100% !important; height: 4px !important; background: #e0e0e0 !important; border-radius: 2px !important; }
.jix-rz-slider-container .rzslider .rz-selection { position: absolute !important; background: var(--jix-grad-brand) !important; height: 4px !important; border-radius: 2px !important; }

.jix-rz-slider-container .rzslider .rz-pointer {
  position: absolute !important; width: 8px !important; height: 34px !important; top: -15px !important;
  background: linear-gradient(180deg, #5b6cf9 0%, #4756e8 100%) !important; border: none !important; border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.55) !important; cursor: pointer !important; z-index: 3 !important; transition: all .2s ease !important;
}
.jix-rz-slider-container .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: #5b6cf9 !important; border: 1.5px solid white !important; border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(91,108,249,.4) !important;
}
.jix-rz-slider-container .rzslider .rz-pointer.rz-max-h {
  background: linear-gradient(180deg, #764ba2 0%, #5c3a80 100%) !important; box-shadow: 0 2px 8px rgba(118,75,162,.55) !important;
}
.jix-rz-slider-container .rzslider .rz-pointer.rz-max-h::before { background: #764ba2 !important; box-shadow: 0 2px 6px rgba(118,75,162,.5) !important; }

.jix-rz-slider-container .rzslider .rz-bubble {
  position: absolute !important; bottom: 20px !important; padding: 5px 9px !important;
  font-size: 10.5px !important; font-weight: 700 !important; background: white !important; color: var(--jix-text-primary) !important;
  border: 1.5px solid var(--jix-indigo-500) !important; border-radius: 6px !important; white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; letter-spacing: .2px !important;
}
.jix-rz-slider-container .rzslider .rz-bubble.rz-limit { display: none !important; }
.jix-rz-slider-container .rzslider .rz-active .rz-bubble {
  background: var(--jix-grad-brand) !important; color: white !important; border-color: var(--jix-indigo-500) !important;
}

/* ── Resolution + pagination ──────────────────────────────── */

.jix-pagination {
  display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important;
}
.jix-page-size { display: flex !important; align-items: center !important; gap: 6px !important; }

.jix-page-nav {
  display: flex !important; align-items: center !important; gap: 4px !important;
}
.jix-page-nav .md-icon-button {
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; margin: 0 !important;
  padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.jix-page-nav .md-icon-button md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important;
  margin: 0 !important; color: var(--jix-text-secondary) !important;
}
.jix-page-indicator { font-size: 12px !important; color: var(--jix-text-secondary) !important; white-space: nowrap !important; padding: 0 4px !important; }