/* Breadcrumb Navigation Component
   Used for document stage navigation

   styles/components/breadcrumb.css
*/

/* Stage Breadcrumb Container */
.doc-stage-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 0px;
  background-color: var(--surface-default, #ffffff);
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.doc-stage-breadcrumb .breadcrumb-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #666666);
  margin-right: 8px;
}

/* Stage Links */
.stage-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  padding: 4px 10px;
  color: var(--text-secondary, #666666);
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.stage-link.active {
  color: var(--text-primary, #333333);
  background-color: var(--interactive-hover, rgba(14, 48, 72, 0.1));
  font-weight: 500;
}

.stage-link:hover:not(.active) {
  background-color: var(--surface-alt, #f0f2f5);
}

/* Stage Number Circle */
.stage-link .stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--surface-alt, #f0f2f5);
  color: var(--text-secondary, #666666);
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
  transition: all 0.2s ease;
}

/* Stage Link States */
.stage-link.active .stage-number {
  background-color: var(--interactive-primary, #0e3048);
  color: var(--text-on-primary, #ffffff);
}

.stage-link .stage-number.status--completed,
.stage-link .stage-number.completed {
  background-color: var(--status-success, #28a745);
  color: var(--text-on-primary, #ffffff);
}

.stage-link .stage-number.status--running,
.stage-link .stage-number.running {
  background-color: var(--job-status-running, #ffc107);
  color: #000;
  /* Dark text on yellow background */
}

.stage-link .stage-number.status--failed,
.stage-link .stage-number.failed {
  background-color: var(--job-status-failed, #dc3545);
  color: var(--text-on-primary, #ffffff);
}

/* Separator Character */
.stage-separator {
  color: var(--text-secondary, #666666);
  margin: 0 2px;
  opacity: 0.5;
}

/* Active Stage with Status */
.stage-link.active.running {
  color: var(--text-primary, #333333);
  font-weight: 600;
}

.stage-link.active.failed {
  color: var(--status-error, #dc3545);
  font-weight: 600;
}

/* ============================
   * Single-Stage Info Bar
   * Replaces breadcrumb navigation for single-stage task types.
   * Shows Account > Project > Document hierarchy.
   * ============================ */

.msdoc-info-bar {
  gap: 6px;
  padding: 8px 0;
}

.msdoc-info-bar__segment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-secondary, #666666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.msdoc-info-bar__segment--primary {
  color: var(--text-primary, #333333);
  font-weight: 500;
  max-width: 400px;
}

.msdoc-info-bar__icon {
  font-size: 11px;
  color: var(--text-muted, #999999);
  flex-shrink: 0;
}

.msdoc-info-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.msdoc-info-bar__separator {
  color: var(--text-secondary, #666666);
  margin: 0 2px;
  opacity: 0.5;
  flex-shrink: 0;
}

@media (max-width: 1199px) {
  .msdoc-info-bar__segment {
    max-width: 140px;
  }

  .msdoc-info-bar__segment--primary {
    max-width: 200px;
  }
}