/* ═══════════════════════════════════════════════
   Ákotí Breadcrumbs — Pure CSS

   <nav class="akoti-breadcrumbs">
     <a href="/" class="akoti-bc-item">Home</a>
     <a href="/finance" class="akoti-bc-item">Finance</a>
     <span class="akoti-bc-item active">Journal Entries</span>
   </nav>

   Variants: .akoti-bc-arrows, .akoti-bc-pills
   ═══════════════════════════════════════════════ */

.akoti-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
}

.akoti-bc-item {
  color: #5f6368;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px 2px 6px 2px;
  transition: all 0.2s;
  white-space: nowrap;
}

.akoti-bc-item:hover:not(.active) {
  color: #1a2f5e;
  background: #e8f0f8;
  border-radius: 2px 6px 2px 6px;
}

.akoti-bc-item.active {
  color: #1e1e24;
  font-weight: 600;
  cursor: default;
}

/* Separator */
.akoti-bc-item + .akoti-bc-item::before {
  content: '/';
  color: #c0c0c8;
  margin-right: 6px;
  font-weight: 300;
}

/* Arrow variant */
.akoti-bc-arrows .akoti-bc-item + .akoti-bc-item::before {
  content: '›';
  font-size: 16px;
}

/* Pill variant */
.akoti-bc-pills .akoti-bc-item {
  background: #f0f2f5;
  border-radius: 10px 4px 10px 4px;
  padding: 4px 12px;
}
.akoti-bc-pills .akoti-bc-item + .akoti-bc-item::before { content: none; }
.akoti-bc-pills .akoti-bc-item.active {
  background: #1a2f5e;
  color: white;
  border-radius: 4px 10px 4px 10px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-bc-item { color: #9a9aa6; }
  :root:not([data-theme="light"]) .akoti-bc-item:hover:not(.active) { color: #a8c8e8; background: rgba(168,200,232,0.1); }
  :root:not([data-theme="light"]) .akoti-bc-item.active { color: #e0e0e4; }
  :root:not([data-theme="light"]) .akoti-bc-item + .akoti-bc-item::before { color: #4a4a56; }
  :root:not([data-theme="light"]) .akoti-bc-pills .akoti-bc-item { background: #2a2a32; }
  :root:not([data-theme="light"]) .akoti-bc-pills .akoti-bc-item.active { background: #a8c8e8; color: #0f1b3d; }
}