/* ========================================
   Breadcrumb Navigation Component
   مولفه مسیریابی (Breadcrumb) برای ناوبری بهتر
   ======================================== */

/* ===== 1. Breadcrumb Container ===== */
.breadcrumb-nav {
  background: var(--color-bg-secondary, #ffffff);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
}

.breadcrumb-nav[aria-label="breadcrumb"] {
  font-size: 0.875rem;
}

/* ===== 2. Breadcrumb List ===== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

/* ===== 3. Breadcrumb Items ===== */
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-item a {
  color: var(--color-text-secondary, #64748b);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 0.375rem);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--color-accent-blue, #3b82f6);
  background: var(--color-bg-tertiary, #f8fafc);
  outline: none;
}

.breadcrumb-item.active {
  color: var(--color-text-primary, #1e293b);
  font-weight: 500;
}

/* ===== 4. Breadcrumb Separator ===== */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--color-text-tertiary, #94a3b8);
  padding: 0 0.25rem;
  display: inline-block;
}

/* Alternative separator with icon */
.breadcrumb-item + .breadcrumb-item.with-icon::before {
  content: "›";
  font-size: 1.25rem;
  line-height: 1;
}

/* RTL Support */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item.with-icon::before {
  content: "‹";
}

/* ===== 5. Breadcrumb with Icons ===== */
.breadcrumb-item i,
.breadcrumb-item .icon {
  font-size: 1rem;
  margin-inline-end: 0.25rem;
}

.breadcrumb-item:first-child i.fa-home,
.breadcrumb-item:first-child .icon-home {
  color: var(--color-accent-blue, #3b82f6);
}

/* ===== 6. Themed Breadcrumbs ===== */
.breadcrumb-nav.water {
  border-bottom-color: var(--theme-water-border, #90CAF9);
  background: var(--theme-water-bg, #E3F2FD);
}

.breadcrumb-nav.water .breadcrumb-item a:hover {
  color: var(--theme-water-primary, #007BFF);
}

.breadcrumb-nav.electricity {
  border-bottom-color: var(--theme-electricity-border, #FFE082);
  background: var(--theme-electricity-bg, #FFF8E1);
}

.breadcrumb-nav.electricity .breadcrumb-item a:hover {
  color: var(--theme-electricity-primary, #FFC107);
}

.breadcrumb-nav.gas {
  border-bottom-color: var(--theme-gas-border, #FFAB91);
  background: var(--theme-gas-bg, #FBE9E7);
}

.breadcrumb-nav.gas .breadcrumb-item a:hover {
  color: var(--theme-gas-primary, #FF5722);
}

.breadcrumb-nav.environment {
  border-bottom-color: var(--theme-environment-border, #A5D6A7);
  background: var(--theme-environment-bg, #E8F5E9);
}

.breadcrumb-nav.environment .breadcrumb-item a:hover {
  color: var(--theme-environment-primary, #28A745);
}

/* ===== 7. Container Layout ===== */
.breadcrumb-container {
  max-width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ===== 8. Responsive Design ===== */
@media (max-width: 640px) {
  .breadcrumb {
    font-size: 0.8125rem;
  }

  .breadcrumb-item {
    gap: 0.25rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.125rem;
  }

  /* Hide middle items on very small screens */
  .breadcrumb-item:not(:first-child):not(:last-child):not(.always-show) {
    display: none;
  }

  /* Show ellipsis */
  .breadcrumb-item:first-child::after {
    content: "...";
    color: var(--color-text-tertiary, #94a3b8);
    margin-inline-start: 0.5rem;
  }

  .breadcrumb-item:last-child {
    display: inline-flex;
  }
}

/* ===== 9. Dark Theme Support ===== */
[data-theme="dark"] .breadcrumb-nav {
  background: var(--color-bg-secondary, #1e293b);
  border-bottom-color: var(--color-border, #334155);
}

[data-theme="dark"] .breadcrumb-item a:hover,
[data-theme="dark"] .breadcrumb-item a:focus {
  background: var(--color-bg-tertiary, #334155);
}

/* ===== 10. Accessibility ===== */
.breadcrumb-nav[aria-label] {
  /* Already has aria-label for screen readers */
}

.breadcrumb-item.active {
  /* Current page is not a link */
  pointer-events: none;
}

/* Focus visible styles */
.breadcrumb-item a:focus-visible {
  outline: 2px solid var(--color-border-focus, #3b82f6);
  outline-offset: 2px;
}

/* ===== 11. Animation ===== */
.breadcrumb-item {
  animation: breadcrumb-fade-in 0.3s ease-out;
}

@keyframes breadcrumb-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .breadcrumb-item {
    animation: none;
  }
}