/* =====================================================
   JOB DEFINITIONS DIALOG - Compact List View
   ===================================================== */

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


/* ===== BASE DIALOG =====
   Fixed width AND height (not just min-width, which only floors it —
   the dialog was still free to shrink/grow between min-width and
   max-width based on content, same as it was free to grow/shrink
   vertically before height was pinned) + flex column shell, with only
   .jobs-content as the scrollable region below. The real fix for the
   dialog's OUTER box is the higher-specificity `md-dialog.jobs-dialog`
   rule further down ("FIX — Dialog fixed size" block) — these properties
   here are a same-intent fallback for anywhere that rule doesn't reach. */
.jobs-dialog {
  width: 1350px !important;
  min-width: 1350px !important;
  max-width: 95vw !important;
  height: 800px !important;
  max-height: 90vh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ===== TOOLBAR ===== */
:where(.job-instances-dialog, .jobs-dialog) .jobs-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;
  flex-shrink: 0 !important;
}

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

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

:where(.job-instances-dialog, .jobs-dialog) .jobs-toolbar .jobs-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

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

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

:where(.job-instances-dialog, .jobs-dialog) .jobs-toolbar .md-icon-button {
  color: white !important;
  margin: 0 !important;
}

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


/* ===== CONTENT =====
   The one scrollable region — fills whatever's left below the fixed-
   height toolbar, so the table growing/shrinking as search filters it
   scrolls WITHIN this box instead of resizing the dialog itself. */
.jobs-dialog .jobs-content,
md-dialog.jobs-dialog md-dialog-content.jobs-content {
  padding: 24px !important;
  background: var(--jobs-bg-light) !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}


/* ===== STATS BAR ===== */
:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-item md-icon {
  font-size: 32px !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--jobs-primary) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--jobs-text) !important;
  line-height: 1 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-label {
  font-size: 11px !important;
  color: var(--jobs-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-divider {
  width: 1px !important;
  height: 40px !important;
  background: var(--jobs-border) !important;
}


/* ===== SEARCH BAR ===== */
:where(.job-instances-dialog, .jobs-dialog) .jobs-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-input-wrapper {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  gap: 10px !important;
  padding: 0 12px !important;
  height: 40px !important;
  background: var(--jobs-bg-light) !important;
  border: 1.5px solid var(--jobs-border) !important;
  border-radius: 8px !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-input-wrapper:focus-within {
  border-color: var(--jobs-primary) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.12) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-icon {
  font-size: 19px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  color: var(--jobs-text-secondary) !important;
  margin: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: var(--jobs-text) !important;
  padding: 0 !important;
}
:where(.job-instances-dialog, .jobs-dialog) .jobs-search-input::placeholder { color: #9aa4b2 !important; }

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-clear-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  background: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background .16s ease !important;
}
:where(.job-instances-dialog, .jobs-dialog) .jobs-search-clear-btn:hover { background: rgba(0,0,0,0.06) !important; }
:where(.job-instances-dialog, .jobs-dialog) .jobs-search-clear-btn md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  color: var(--jobs-text-secondary) !important;
  margin: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-search-results-count {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--jobs-text-secondary) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}


/* ===== LOADING & EMPTY STATES =====
   min-height matches .jobs-table-wrapper's own min-height below — without
   it, the visible white "card" area collapses from a ~13-row table down to
   a ~200px empty-state box the instant a search matches nothing, which
   reads as the whole dialog jarringly resizing even though the OUTER
   dialog frame itself is already pinned (see the FIX block further down).
   Keeping both at the same min-height means switching between "table with
   N rows" and "no results" only changes what's INSIDE that fixed-size
   card, not the card's own size. */
:where(.job-instances-dialog, .jobs-dialog) .loading-overlay,
.jobs-dialog .empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 480px !important;
  padding: 60px 20px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  box-sizing: border-box !important;
}

:where(.job-instances-dialog, .jobs-dialog) .loading-overlay p { margin-top: 16px !important; color: var(--jobs-text-secondary) !important; font-size: 14px !important; }
.jobs-dialog .empty-state md-icon { font-size: 64px !important; width: 64px !important; height: 64px !important; color: #ddd !important; margin-bottom: 16px !important; }
.jobs-dialog .empty-state h3 { font-size: 18px !important; font-weight: 600 !important; color: var(--jobs-text) !important; margin: 0 0 8px 0 !important; }
.jobs-dialog .empty-state p { margin: 0 !important; color: var(--jobs-text-secondary) !important; font-size: 14px !important; }


/* ===== TABLE WRAPPER =====
   min-height matches the empty-state's own — see that rule's comment for
   why. A search that narrows 13 rows down to 1-2 still leaves the card at
   its normal size (extra whitespace below the rows) instead of shrinking
   to fit, same principle as the empty state not shrinking to fit either. */
:where(.job-instances-dialog, .jobs-dialog) .jobs-table-wrapper {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  min-height: 480px !important;
  box-sizing: border-box !important;
}


/* ===== TABLE HEADER ===== */
:where(.job-instances-dialog, .jobs-dialog) .jobs-table-header {
  display: grid !important;
  grid-template-columns: 130px minmax(320px, 1fr) 110px 100px 90px 110px 200px !important;
  align-items: center !important;
  padding: 0 20px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  gap: 12px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .jobs-table-header > div {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}


/* ===== ROW WRAPPER ===== */
:where(.job-instances-dialog, .jobs-dialog) .job-row-wrapper {
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background 0.15s ease !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-wrapper:last-child {
  border-bottom: none !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-wrapper:hover {
  background: #fafbff !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-wrapper.row-has-errors {
  background: #fff8f8 !important;
  border-left: 3px solid var(--jobs-error) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-wrapper.row-expanded {
  background: #f8f9ff !important;
}


/* ===== MAIN ROW =====
   min-height (not a fixed height) — job-row-desc can now wrap onto 2
   lines for long descriptions, so the row needs room to grow past 56px
   when that happens instead of clipping it. */
:where(.job-instances-dialog, .jobs-dialog) .job-row {
  display: grid !important;
  grid-template-columns: 130px minmax(320px, 1fr) 110px 100px 90px 110px 200px !important;
  align-items: center !important;
  padding: 10px 20px !important;
  min-height: 56px !important;
  gap: 12px !important;
}


/* ── Column: ID ── */
:where(.job-instances-dialog, .jobs-dialog) .col-id {
  overflow: hidden !important;
}

:where(.job-instances-dialog, .jobs-dialog) .col-id .job-id-pill {
  display: inline-block !important;
  background: #f0f0f8 !important;
  color: var(--jobs-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-family: 'Monaco', 'Courier New', monospace !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ── Column: Name ── */
:where(.job-instances-dialog, .jobs-dialog) .col-name {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-name-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-icon {
  color: var(--jobs-primary) !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-name-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--jobs-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-row-desc {
  font-size: 11px !important;
  color: var(--jobs-text-secondary) !important;
  line-height: 1.3 !important;
  /* 2-line clamp instead of single-line ellipsis — the Name column is
     much wider now (see .jobs-table-header's grid-template-columns), but
     several job descriptions are still long enough (100+ chars) that no
     reasonable column width fits them on one line. Two lines + ellipsis
     on the second gets the description actually readable instead of
     cut off after a few words. */
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}


/* Error badge inline */
:where(.job-instances-dialog, .jobs-dialog) .job-error-badge-inline {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  background: var(--jobs-error) !important;
  color: white !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  animation: pulse-error 2s ease-in-out infinite !important;
}

:where(.job-instances-dialog, .jobs-dialog) .job-error-badge-inline md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: white !important;
  margin: 0 !important;
}

@keyframes pulse-error {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(244,67,54,0); }
}

/* ── Column: Status ── */


:where(.job-instances-dialog, .jobs-dialog) .status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .status-pill.status-enabled {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .status-pill.status-enabled .status-dot {
  background: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.3) !important;
  animation: pulse-green 2s ease-in-out infinite !important;
}

:where(.job-instances-dialog, .jobs-dialog) .status-pill.status-disabled {
  background: #f5f5f5 !important;
  color: #9e9e9e !important;
}

:where(.job-instances-dialog, .jobs-dialog) .status-pill.status-disabled .status-dot {
  background: #bdbdbd !important;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(76,175,80,0); }
}


/* ── Metric Values ── */
:where(.job-instances-dialog, .jobs-dialog) .metric-value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--jobs-text) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .metric-value.metric-error {
  color: var(--jobs-error) !important;
}

/* ── Column: Actions ── */


:where(.job-instances-dialog, .jobs-dialog) .action-btn {
  margin: 0 !important;
  padding: 0 12px !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}


/* Angular Material inner wrapper — forzamos flex para centrar icono + texto */
.action-btn .md-button-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 100% !important;
  vertical-align: top !important;
}



:where(.job-instances-dialog, .jobs-dialog) .btn-history {
  background: var(--jobs-bg-light) !important;
  color: var(--jobs-text-secondary) !important;
  border: 1px solid var(--jobs-border) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .btn-history:hover {
  background: #eeefff !important;
  color: var(--jobs-primary) !important;
  border-color: var(--jobs-primary) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .btn-history md-icon { color: inherit !important; }

:where(.job-instances-dialog, .jobs-dialog) .btn-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

:where(.job-instances-dialog, .jobs-dialog) .btn-info:hover {
  box-shadow: 0 3px 10px rgba(102,126,234,0.45) !important;
  transform: translateY(-1px) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .btn-info md-icon { color: white !important; }


/* ===== EXPANDABLE DETAIL PANEL ===== */
:where(.job-instances-dialog, .jobs-dialog) .job-detail-panel {
  border-top: 1px solid #e8ecff !important;
  background: #f8f9ff !important;
  overflow: hidden !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-panel-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 20px !important;
}


/* ── Detail Section ── */
:where(.job-instances-dialog, .jobs-dialog) .detail-section {
  padding: 0 20px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-section:first-child {
  padding-left: 0 !important;
  border-right: 1px solid #e0e4ff !important;
  padding-right: 24px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-section:last-child {
  padding-left: 24px !important;
  padding-right: 0 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--jobs-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 14px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-section-title md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--jobs-primary) !important;
}


/* ── Detail Fields ── */
:where(.job-instances-dialog, .jobs-dialog) .detail-row {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-field {
  flex: 1 !important;
  min-width: 100px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-field-full {
  flex: 1 1 100% !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--jobs-text-secondary) !important;
  margin-bottom: 4px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-value {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--jobs-text) !important;
  word-break: break-word !important;
}

:where(.job-instances-dialog, .jobs-dialog) .detail-value.mono {
  font-family: 'Monaco', 'Courier New', monospace !important;
  font-size: 12px !important;
  background: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #e0e4ff !important;
  display: inline-block !important;
}

:where(.job-instances-dialog, .jobs-dialog) .method-value .class-name {
  color: var(--jobs-primary) !important;
  font-weight: 600 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .method-value .method-name {
  color: #e91e63 !important;
  font-weight: 600 !important;
}


/* ── Stats Grid ── */
:where(.job-instances-dialog, .jobs-dialog) .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box {
  background: white !important;
  border: 1px solid #e8ecff !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--jobs-primary) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box-value {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--jobs-text) !important;
  line-height: 1 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box-label {
  font-size: 10px !important;
  color: var(--jobs-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  font-weight: 600 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box.stat-box-error-active {
  border-color: #ffcdd2 !important;
  background: #fff8f8 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box.stat-box-error-active md-icon {
  color: var(--jobs-error) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .stat-box.stat-box-error-active .stat-box-value {
  color: var(--jobs-error) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .jobs-dialog,
md-dialog.jobs-dialog {
    width: 95vw !important;
    min-width: 95vw !important;
  }

  :where(.job-instances-dialog, .jobs-dialog) .jobs-table-header,
:where(.job-instances-dialog, .jobs-dialog) .job-row {
    grid-template-columns: 120px minmax(0, 1fr) 100px 90px 80px 100px 180px !important;
  }
}

@media (max-width: 900px) {
  :where(.job-instances-dialog, .jobs-dialog) .detail-panel-inner {
    grid-template-columns: 1fr !important;
  }

  :where(.job-instances-dialog, .jobs-dialog) .detail-section:first-child {
    border-right: none !important;
    border-bottom: 1px solid #e0e4ff !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  :where(.job-instances-dialog, .jobs-dialog) .detail-section:last-child {
    padding-left: 0 !important;
  }

  :where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar .stat-divider { display: none !important; }
  :where(.job-instances-dialog, .jobs-dialog) .jobs-stats-bar { flex-wrap: wrap !important; gap: 12px !important; }
}




/* =====================================================
   ANGULAR MATERIAL OVERRIDES — Alignment fixes
   ===================================================== */

/* ── Name column: forzar alineación izquierda contra cualquier herencia ── */
.jobs-dialog .col-name,
.jobs-dialog .job-name-cell,
.jobs-dialog .job-name-info {
  text-align: left !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  align-items: center !important;
}


/* ── Evitar que el grid de Angular centre las celdas ── */
.jobs-dialog .job-row > div,
.jobs-dialog .jobs-table-header > div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}


/* Excepciones: columnas numéricas y status se centran */
.jobs-dialog .col-status,
.jobs-dialog .col-runs,
.jobs-dialog .col-failures,
.jobs-dialog .col-avgtime {
  justify-content: center !important;
  text-align: center !important;
}


/* Actions se alinea a la derecha */
.jobs-dialog .col-actions {
  justify-content: flex-end !important;
}


/* ── Detail section title: forzar izquierda ── */
.jobs-dialog .detail-section-title {
  text-align: left !important;
  justify-content: flex-start !important;
  width: 100% !important;
}


/* ── Angular Material md-button: centrado vertical del icono interno ──
   AM envuelve el contenido en <span class="md-button-content"> que
   hereda text-align:center del padre y usa line-height para centrar */
.jobs-dialog .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: normal !important;
}

.jobs-dialog .action-btn .md-button-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: normal !important;
  vertical-align: middle !important;
}

.jobs-dialog .action-btn md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
}



/* =====================================================
   HARD OVERRIDE — Name column left alignment
   Máxima especificidad para ganar a Angular Material
   ===================================================== */

md-dialog.jobs-dialog .job-row {
  justify-items: stretch !important;
}

md-dialog.jobs-dialog .col-name {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  justify-self: stretch !important;
  width: 100% !important;
}

md-dialog.jobs-dialog .job-name-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  flex: 1 !important;
}

md-dialog.jobs-dialog .job-name-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}

md-dialog.jobs-dialog .job-row-name {
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}


/* NOT display:block like job-row-name above — job-row-desc needs the
   -webkit-box display mode for its 2-line clamp (see the base
   .job-row-desc rule) to actually take effect; this selector's higher
   specificity would otherwise silently override it back to block/
   single-line-ellipsis. */
md-dialog.jobs-dialog .job-row-desc {
  text-align: left !important;
  width: 100% !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}


/* Header NAME column también */
md-dialog.jobs-dialog .jobs-table-header .col-name {
  justify-content: flex-start !important;
  text-align: left !important;
}


/* Detail section title */
md-dialog.jobs-dialog .detail-section-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}



/* =====================================================
   HARD OVERRIDE — Detail panel section titles left alignment
   ===================================================== */

md-dialog.jobs-dialog .detail-panel-inner {
  justify-items: stretch !important;
}

md-dialog.jobs-dialog .detail-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

md-dialog.jobs-dialog .detail-section-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  justify-self: start !important;
}

md-dialog.jobs-dialog .detail-section-title md-icon {
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

md-dialog.jobs-dialog .detail-row {
  width: 100% !important;
  justify-content: flex-start !important;
}

md-dialog.jobs-dialog .detail-field,
md-dialog.jobs-dialog .detail-label,
md-dialog.jobs-dialog .detail-value {
  text-align: left !important;
}



/* =====================================================
   FIX — Configuration title left align (align-self)
   ===================================================== */

md-dialog.jobs-dialog .detail-section *,
md-dialog.jobs-dialog .detail-section-title,
md-dialog.jobs-dialog .detail-section-title md-icon {
  align-self: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

md-dialog.jobs-dialog .detail-section {
  align-items: flex-start !important;
  align-self: stretch !important;
}

md-dialog.jobs-dialog .detail-section-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  gap: 8px !important;
}

md-dialog.jobs-dialog .detail-section-title md-icon {
  order: -1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}




/* =====================================================
   FIX — Dialog fixed size, table scrolls internally
   ===================================================== */

/* Fijamos el dialog a un tamaño fijo — width TAMBIÉN, no solo height:
   sin un width explícito acá (el único que había vivía en la regla
   .jobs-dialog de más arriba, con MENOR especificidad que este selector
   md-dialog.jobs-dialog), el ancho real seguía determinado por el
   contenido — por eso el diálogo se achicaba/agrandaba en AMBAS
   dimensiones al filtrar la tabla, no solo en altura. */
md-dialog.jobs-dialog {
  width: 1350px !important;
  min-width: 1350px !important;
  max-width: 95vw !important;
  height: 800px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}


/* El content ocupa todo el espacio disponible con scroll */
md-dialog.jobs-dialog md-dialog-content.jobs-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}


/* La tabla wrapper no crece — el scroll está en jobs-content */
.jobs-dialog .jobs-table-wrapper {
  overflow: visible !important;
}


/* El panel de detalle tiene altura máxima para no explotar */
.jobs-dialog .job-detail-panel {
  max-height: 340px !important;
  overflow-y: auto !important;
}



/* =====================================================
   LAST EXECUTION — detail panel additions
   ===================================================== */

:where(.job-instances-dialog, .jobs-dialog) .detail-value-muted {
  font-size: 12px !important;
  color: var(--jobs-text-secondary) !important;
  font-style: italic !important;
}

.last-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.last-status-pill .status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.last-status-ok {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.last-status-ok .status-dot {
  background: #4caf50 !important;
}

.last-status-fail {
  background: #ffebee !important;
  color: #c62828 !important;
}

.last-status-fail .status-dot {
  background: #f44336 !important;
}

.last-status-na {
  background: #f5f5f5 !important;
  color: #9e9e9e !important;
}

.last-status-na .status-dot {
  background: #bdbdbd !important;
}


/* Last / Next Execution values */
:where(.job-instances-dialog, .jobs-dialog) .last-run-value,
:where(.job-instances-dialog, .jobs-dialog) .next-run-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 600 !important;
}

:where(.job-instances-dialog, .jobs-dialog) .last-run-value {
  color: var(--jobs-text) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .last-run-value md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--jobs-text-secondary) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .next-run-value {
  color: var(--jobs-primary) !important;
}

:where(.job-instances-dialog, .jobs-dialog) .next-run-value md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--jobs-primary) !important;
}