/* The Overview (`/dash`, `pages/overview.py`) and the Connectors page (`/dash/connectors`). */

.overview-page,
.connectors-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}
.overview-title,
.connectors-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 4px 0 16px;
}

/*
 * Tiles. Desktop: Pipes (two columns) beside Jobs, then Pipelines beside Recent runs (two
 * columns), then Performance. Tablets: two columns, Pipes and Recent runs full width. Phones: one.
 */
.overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.overview-tile-pipes,
.overview-tile-runs {
  grid-column: span 2;
}
.overview-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 18px;
  background: #2a3037;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.overview-tile-heading {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
}
.overview-tile-title {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
a.overview-tile-title:hover,
a.overview-tile-title:focus-visible {
  color: #fff;
  text-decoration: underline;
}
/* The body fills the tile, so a chart (the Pipelines' history) can take the row's height. */
.overview-tile-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 64px;
}
.overview-tile-body[hidden] { display: none; }

/* The number, with a short fact beside it. */
.overview-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
}
.overview-stat-link,
.overview-stat-link:hover {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.overview-stat-value {
  color: #fff;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.overview-aside {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  white-space: nowrap;
}
.overview-tile-action {
  margin-left: 14px;
  min-height: 36px;
}
.overview-headline .overview-tile-action { margin-left: 0; }

/* A bar split by state, each part as wide as its share. */
.overview-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin: 6px 0 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.overview-bar-part {
  flex-basis: 0;
  min-width: 4px;
}

/* State colors: bars, the history's columns and the dots before each state. */
.overview-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8b949e;
}
.overview-bar-ok,
.overview-bar-succeeded,
.overview-bar-running,
.overview-dot-ok,
.overview-dot-succeeded,
.overview-dot-running { background: #7ee2a8; }
.overview-bar-failing,
.overview-bar-failed,
.overview-dot-failing,
.overview-dot-failed { background: #ff7b72; }
.overview-bar-stalled,
.overview-dot-stalled { background: #e0a526; }
.overview-bar-paused,
.overview-dot-paused { background: #d2a8ff; }
.overview-bar-stopped,
.overview-dot-stopped { background: #8b949e; }
.overview-bar-unrecorded,
.overview-bar-none { background: rgba(255, 255, 255, 0.2); }
/* A Pipeline run in progress is blue, as in Recent runs (a running job is green). */
.overview-tile-pipelines .overview-bar-running,
.overview-tile-pipelines .overview-dot-running { background: #79c0ff; }

/* Lists inside tiles (states, latest syncs, runs): 44px rows. */
.overview-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.overview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.overview-pipeline-link,
.overview-pipe-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.overview-pipeline-link:hover .mrsm-repr-name { text-decoration: underline; }
.overview-pipe-link code,
.overview-run-targets code {
  color: #dceaf6;
  font-size: 0.875rem;
}
.overview-pipe-link:hover code { text-decoration: underline; }
.overview-when {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  white-space: nowrap;
}
.overview-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.overview-none {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.6);
}
.overview-error {
  margin-top: 8px;
  padding: 8px 10px;
  color: #ffb4ad;
  background: rgba(255, 123, 114, 0.1);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

/* Run statuses. */
.overview-status {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #d0d7de;
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.overview-status-succeeded { color: #0d1117; background: #7ee2a8; }
.overview-status-failed,
.overview-status-error,
.overview-status-upstream_failed { color: #fff; background: #d1495b; }
.overview-status-running { color: #0d1117; background: #79c0ff; }
.overview-status-stopped,
.overview-status-none { color: #d0d7de; background: rgba(255, 255, 255, 0.12); }

/* States (pipes, Pipelines, jobs): a dot, the state and the count, linked to the filtered page. */
.overview-job-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
a.overview-job-link:hover { color: #fff; }
a.overview-job-link:hover .overview-job-state { text-decoration: underline; }
.overview-job-count {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Beside a taller tile, the jobs' rows share its height (up to 64px each) instead of leaving a gap. */
.overview-tile-jobs .overview-tile-body > .overview-job-states {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.overview-tile-jobs .overview-job-states > .overview-row {
  flex: 1 1 44px;
  align-items: stretch;
  max-height: 64px;
}
/* No recorded sync, never run: a ring, not a color. */
.overview-dot-unrecorded,
.overview-dot-none {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Pipes: the states beside the latest syncs and the connectors. */
.overview-pipes-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: 28px;
}
.overview-pipes-detail {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.overview-pipes-detail,
.overview-pipes-detail > .overview-pipes-section,
#overview-pipes-latest {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
/* The latest syncs share the column's height like the jobs' rows. */
#overview-pipes-latest > .overview-row {
  flex: 1 1 44px;
  max-height: 64px;
}
.overview-pipes-section + .overview-pipes-section { margin-top: 14px; }
.overview-pipes-connectors { margin-top: 10px; }
.overview-subheading {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 600;
}
.overview-pipes-section .overview-list { margin-top: 0; }
/* Next runs (Jobs tile): each waiting job and when its next lap is due. */
.overview-jobs-section { margin-top: 14px; }
.overview-jobs-section .overview-list { margin-top: 0; }
.overview-next-job {
  min-width: 0;
  color: #dceaf6;
  font-size: 0.875rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.overview-next-job:hover { text-decoration: underline; }
.overview-latest-pipe {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.overview-latest-pipe .overview-pipe-link { display: block; }
.overview-latest-failing .overview-when { color: #ff9b94; }
.overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.overview-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  text-decoration: none;
}
.overview-chip code {
  min-width: 0;
  overflow: hidden;
  color: #dceaf6;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-chip-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.overview-chip:hover,
.overview-chip:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Pipelines: their states in two columns, then their runs over the last day, hour by hour (the chart takes the row's spare height). */
#overview-pipelines-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
.overview-history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: 14px;
}
.overview-history-bars {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 3px;
  min-height: 56px;
  max-height: 140px;
}
.overview-hour {
  display: flex;
  flex: 1 1 0;
  flex-direction: column-reverse;
  gap: 1px;
  min-width: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
.overview-hour-part {
  min-height: 3px;
  border-radius: 2px 2px 0 0;
}
.overview-hour-unread { border-bottom-style: dotted; border-bottom-color: rgba(255, 255, 255, 0.08); }
.overview-history-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}
.overview-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}
.overview-fact { min-width: 0; }
.overview-fact dt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  font-weight: 400;
}
.overview-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  margin: 0;
}
.overview-fact-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.overview-fact-link:hover,
.overview-fact-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.overview-fact-name {
  min-width: 0;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.overview-fact-none {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.5);
}
#overview-pipelines-last-failure .overview-fact-link { color: #ff9b94; }

/* Recent runs: status, what ran, when, how long, what changed. */
.overview-run {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 5.5rem 4.5rem minmax(0, 11rem);
  gap: 12px;
}
.overview-run .overview-when { margin-left: 0; text-align: right; }
.overview-run .overview-status { justify-self: start; }
.overview-run-what {
  display: flex;
  align-items: center;
  gap: 8px;
}
.overview-repeat {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}
.overview-failures { color: #ff9b94; }
.overview-duration,
.overview-counts {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-run-what { min-width: 0; overflow: hidden; }
.overview-run-what > a,
.overview-run-what > details { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.overview-run-pipes summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
.overview-run-targets {
  list-style: none;
  padding: 0 0 6px 12px;
  margin: 0;
}
.overview-run-failed .overview-run-what { font-weight: 600; }
/* Recent runs show what ran in full: a long Pipeline or pipe name wraps instead of being cut. */
.overview-run-what > .overview-pipeline-link,
.overview-run-what > .overview-pipe-link,
.overview-run-what > .overview-hidden-pipe {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.overview-run-what > .overview-pipeline-link .mrsm-pipeline-repr { overflow-wrap: anywhere; }

/* Loading: two pulsing lines. */
.overview-skeleton-line {
  height: 14px;
  margin: 12px 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  animation: overview-pulse 1.4s ease-in-out infinite;
}
.overview-skeleton-line.short { width: 55%; }
@keyframes overview-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .overview-skeleton-line { animation: none; }
}

/* An instance without pipes: the Pipes tile's title and actions (the other tiles stay). */
.overview-empty {
  padding: 4px 0 2px;
}
.overview-empty-title {
  margin: 4px 0 16px;
  font-size: 1.375rem;
  font-weight: 600;
}
.overview-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.overview-empty-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 9rem;
}

@media (max-width: 991.98px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-tile-pipes,
  .overview-tile-runs { grid-column: 1 / -1; }
}
/* Recent runs on a narrow screen: the status and when, then what ran, then how long and what changed. */
@media (max-width: 767.98px) {
  .overview-run {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "status . when"
      "what what what"
      "duration counts counts";
    row-gap: 0;
    padding: 6px 0;
  }
  .overview-run .overview-status { grid-area: status; }
  .overview-run .overview-when { grid-area: when; }
  .overview-run .overview-run-what { grid-area: what; }
  .overview-run .overview-duration { grid-area: duration; }
  .overview-run .overview-counts { grid-area: counts; }
}
@media (max-width: 575.98px) {
  .overview-page,
  .connectors-page {
    padding: 12px 16px 24px;
  }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-tile-pipes,
  .overview-tile-runs { grid-column: auto; }
  .overview-pipes-layout { grid-template-columns: minmax(0, 1fr); }
  .overview-pipes-detail {
    margin-top: 14px;
    padding: 0;
    border-left: 0;
  }
}
/* Phones, narrow windows and touch screens: every link and button of the tiles is a 44px target. */
@media (max-width: 767.98px), (pointer: coarse) {
  .overview-tile-title { min-height: 44px; }
  .overview-pipeline-link,
  .overview-pipe-link {
    display: block;
    line-height: 44px;
  }
  .overview-run-what > .overview-pipeline-link,
  .overview-run-what > .overview-pipe-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.35;
  }
  .overview-tile-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .overview-chip,
  .overview-fact-link,
  .overview-fact-none { min-height: 44px; }
}

/* Connectors: a table on wide screens, one card per connector on phones. */
.connectors-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.connectors-header .connectors-title { margin: 0; }
.connectors-filter.form-control {
  flex: 0 1 320px;
  margin-left: auto;
  min-height: 36px;
}
.connectors-table-wrap { overflow-x: auto; }
.connectors-table { margin-bottom: 0; }
.connectors-table td,
.connectors-table th {
  vertical-align: middle;
}
.connectors-keys {
  color: #dceaf6;
  font-size: 0.9rem;
  white-space: nowrap;
}
.connectors-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  cursor: pointer;
}
.connectors-attributes {
  max-width: 36rem;
  margin: 6px 0 0;
  padding: 8px 10px;
  color: #c9d1d9;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.connectors-type { font-weight: 600; }
.connectors-plugin,
.connectors-source-detail {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}
.connectors-source-detail { color: #dceaf6; }
.connectors-col-flavor,
.connectors-col-port,
.connectors-col-type {
  white-space: nowrap;
}
.connectors-col-host {
  min-width: 7rem;
  overflow-wrap: break-word;
}
.connectors-col-database {
  overflow-wrap: anywhere;
}
.connectors-test-button.btn {
  min-height: 36px;
  white-space: nowrap;
}
.connectors-test-result {
  margin-top: 4px;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.connectors-test-success { color: #7ee2a8; }
.connectors-test-failure { color: #ff9b94; }
.connectors-none { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 767.98px) {
  .connectors-filter.form-control {
    flex: 1 1 100%;
    margin-left: 0;
    min-height: 44px;
  }
  .connectors-table thead { display: none; }
  .connectors-table,
  .connectors-table tbody,
  .connectors-table tr,
  .connectors-table td {
    display: block;
    width: 100%;
  }
  .connectors-table tr {
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
  }
  .connectors-table td {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    border: 0;
  }
  .connectors-table td:empty { display: none; }
  .connectors-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6rem;
    color: rgba(255, 255, 255, 0.55);
  }
  /* The value beside its label: it wraps inside the card (a long variable name, a path). */
  .connectors-cell {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .connectors-keys { white-space: normal; }
  .connectors-source-detail {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .connectors-details summary { min-height: 44px; }
  .connectors-col-test { flex-direction: column; }
  .connectors-test-button.btn { min-height: 44px; }
}