/*
 * Modular Breadcrumbs Component
 * Path: app/frontend/static/css/02-layout/breadcrumbs.css
 */

/* ==========================================================
   1. Structured List Breadcrumb Component (.lc-breadcrumbs)
   ========================================================== */
.lc-breadcrumbs {
  margin-top: var(--lc-space-1, 4px);
  margin-bottom: var(--lc-space-5, 20px);
  padding: var(--lc-space-2, 8px) 0;
  display: flex;
  align-items: center;
}

.lc-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lc-space-2, 8px);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--lc-text-xs, 0.75rem);
  line-height: 1.4;
}

.lc-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-2, 8px);
  color: var(--lc-text-muted, #64748b);
}

.lc-breadcrumb-link {
  color: var(--lc-text-muted, #94a3b8);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--lc-duration-fast, 0.15s) ease;
}

.lc-breadcrumb-link:hover {
  color: var(--lc-accent, var(--lc-accent-fg, #07C494));
  text-decoration: none;
}

.lc-breadcrumb-separator {
  color: var(--lc-text-subtle, #64748b);
  opacity: 0.6;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.lc-breadcrumb-item.is-current {
  color: var(--lc-text, #ffffff);
  font-weight: 600;
  pointer-events: none;
}

/* ==========================================================
   2. Lightweight Inline Topbar Crumbs (.lc-crumbs)
   ========================================================== */
.lc-crumbs {
  display: flex;
  align-items: center;
  gap: var(--lc-space-2, 8px);
  font-size: var(--lc-text-xs, 0.75rem);
  line-height: 1;
  padding: var(--lc-space-2, 8px) 0;
}

.lc-crumbs a {
  color: var(--lc-text-muted, #94a3b8);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--lc-duration-fast, 0.15s) ease;
}

.lc-crumbs a:hover {
  color: var(--lc-accent, var(--lc-accent-fg, #07C494));
}

.lc-crumbs .is-current {
  color: var(--lc-text, #ffffff);
  font-weight: 600;
}

.lc-crumbs .sep {
  color: var(--lc-text-subtle, #64748b);
  opacity: 0.6;
  user-select: none;
}