/* ===== MODERN BREADCRUMB ENHANCEMENTS ===== */

/* Breadcrumb Container */
.breadcrumb, #breadcrumb {
  padding: 0.6em 0;
  margin: 0.5em 0 1em 0;
  border-radius: 6px;
  list-style: none;
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.9em;
}

/* Breadcrumb Item */
.breadcrumb li, #breadcrumb li {
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
}

/* Breadcrumb Link */
.breadcrumb a, #breadcrumb a {
  color: #353ea1;
  text-decoration: none;
  padding: 0.3em 0.5em;
  border-radius: 4px;
  transition: background-color 240ms ease, color 240ms ease;
  font-weight: 500;
  letter-spacing: 0.2px;
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.breadcrumb a:hover, #breadcrumb a:hover {
  background-color: rgba(53, 62, 161, 0.1);
  color: #2a2e7f;
  text-decoration: none;
}

.breadcrumb a:focus, #breadcrumb a:focus {
  outline: 2px solid #353ea1;
  outline-offset: 2px;
}

/* Breadcrumb Separator */
.breadcrumb li::after, #breadcrumb li::after {
  content: '';
  margin: 0;
  display: none;
}

/* Active/Current Breadcrumb */
.breadcrumb li.active, .breadcrumb li:last-child,
#breadcrumb li.active, #breadcrumb li:last-child {
  color: #555;
  font-weight: 600;
}

.breadcrumb li.active a, .breadcrumb li:last-child a,
#breadcrumb li.active a, #breadcrumb li:last-child a {
  color: #555;
  cursor: default;
  pointer-events: none;
  opacity: 0.8;
}

/* Breadcrumb with slash separator variant */
.breadcrumb.slash li::after,
#breadcrumb.slash li::after {
  content: '/';
  margin-left: 0.5em;
}

/* Breadcrumb with pipe separator variant */
.breadcrumb.pipe li::after,
#breadcrumb.pipe li::after {
  content: '|';
  margin-left: 0.5em;
  color: #ddd;
}

/* Breadcrumb with dot separator variant */
.breadcrumb.dot li::after,
#breadcrumb.dot li::after {
  content: '•';
  margin-left: 0.5em;
}

/* Breadcrumb icon support */
.breadcrumb li::before, #breadcrumb li::before {
  content: '';
}

/* Home icon for first breadcrumb */
.breadcrumb li:first-child a::before,
#breadcrumb li:first-child a::before {
  content: '🏠 ';
  margin-right: 0.2em;
  font-size: 0.9em;
}

/* Breadcrumb text truncation for mobile */
.breadcrumb a, #breadcrumb a {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile responsive breadcrumbs */
@media (max-width: 600px) {
  .breadcrumb, #breadcrumb {
    font-size: 0.85em;
    padding: 0.5em 0;
  }

  .breadcrumb a, #breadcrumb a {
    padding: 0.2em 0.4em;
  }

  .breadcrumb li::after, #breadcrumb li::after {
    margin-left: 0.3em;
    font-size: 0.85em;
  }
}

/* Very small mobile screens - show only last 2 items */
@media (max-width: 480px) {
  .breadcrumb li:not(:nth-last-child(-n+2)), 
  #breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }

  .breadcrumb li:nth-last-child(2)::before,
  #breadcrumb li:nth-last-child(2)::before {
    content: '... ';
    color: #999;
    margin-right: 0.3em;
  }
}

/* Breadcrumb with background variant */
.breadcrumb.bg, #breadcrumb.bg {
  background-color: rgba(53, 62, 161, 0.05);
  padding: 0.6em 1em;
  margin: 0.5em 0 1em 0;
}

/* Breadcrumb with shadow variant */
.breadcrumb.shadow, #breadcrumb.shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 0.6em 1em;
  margin: 0.5em 0 1em 0;
}

/* Dark theme support */
body.dark-theme .breadcrumb, body.dark-theme #breadcrumb {
  color: #c0c0c0;
}

body.dark-theme .breadcrumb a, body.dark-theme #breadcrumb a {
  color: #7a8cff;
}

body.dark-theme .breadcrumb a:hover, body.dark-theme #breadcrumb a:hover {
  background-color: rgba(122, 140, 255, 0.15);
  color: #9fb3ff;
}

body.dark-theme .breadcrumb li.active, body.dark-theme .breadcrumb li:last-child,
body.dark-theme #breadcrumb li.active, body.dark-theme #breadcrumb li:last-child {
  color: #e0e0e0;
}

body.dark-theme .breadcrumb li::after, body.dark-theme #breadcrumb li::after {
  color: #666;
}

body.dark-theme .breadcrumb.bg, body.dark-theme #breadcrumb.bg {
  background-color: rgba(53, 62, 161, 0.15);
}

body.dark-theme .breadcrumb.shadow, body.dark-theme #breadcrumb.shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Breadcrumb animation - adjusted for inline display */
.breadcrumb li, #breadcrumb li {
  animation: none;
}

/* Breadcrumb with progress indicator */
.breadcrumb.with-progress::after, #breadcrumb.with-progress::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #353ea1 0%, #7a8cff 100%);
  width: calc(var(--breadcrumb-progress, 50%));
  border-radius: 1px;
}