/* ============================================================
   BatchBrain Layout System v3
   Structural tokens, shell primitives, and responsive rules.
   Discipline from reference: single accent, clear hierarchy,
   one signature detail (sliding accent rail), 8px rhythm.
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Spacing — 8px base rhythm */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  /* Breakpoints */
  --bp-mobile:  576px;
  --bp-tablet:  768px;
  --bp-desktop: 992px;
  --bp-wide:    1200px;

  /* Z-Index */
  --z-base:      0;    --z-dropdown: 1000; --z-sticky: 1020;
  --z-fixed:     1030; --z-modal-bg: 1040;  --z-modal:   1050;
  --z-popover:   1060; --z-tooltip: 1070;    --z-toast:   1080;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.14);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 999px;

  /* Shell dimensions */
  --topbar-height: 56px;
  --topbar-height-mobile: 50px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --bottom-nav-height: 56px;

  /* Content max-widths */
  --content-max: 1440px;
  --content-narrow: 720px;
  --content-comfortable: 1080px;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LAYOUT SHELL — CSS Grid with named template areas
   ============================================================ */
.bb-shell {
  display: grid;
  grid-template-areas: "topbar" "main";
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}

.bb-shell.has-sidebar {
  grid-template-areas: "topbar topbar" "sidebar main";
  grid-template-columns: var(--sidebar-width) 1fr;
}

.bb-shell.is-sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

@media (max-width: 991.98px) {
  .bb-shell.has-sidebar,
  .bb-shell.is-sidebar-collapsed {
    grid-template-areas: "topbar" "main";
    grid-template-columns: 1fr;
  }
}

/* ── Regions ─────────────────────────────────────────────────── */
.bb-region-topbar {
  grid-area: topbar;
  position: sticky; top: 0;
  z-index: var(--z-fixed);
  height: var(--topbar-height);
}

.bb-region-sidebar {
  grid-area: sidebar;
  position: sticky; top: var(--topbar-height);
  height: calc(100dvh - var(--topbar-height));
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain;
  z-index: var(--z-sticky);
  transition: width var(--transition-base);
}

.bb-region-main {
  grid-area: main;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Bottom nav (mobile) ─────────────────────────────────────── */
.bb-region-bottomnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: var(--z-fixed);
  background: var(--bb-surface, #fff);
  border-top: 1px solid var(--bb-border, #e2e8f0);
}

@media (max-width: 991.98px) {
  .bb-region-bottomnav { display: flex; }
  .bb-shell .bb-region-main {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  }
}

/* ── Skip Link ───────────────────────────────────────────────── */
.bb-skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent, #009fff); color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: calc(var(--z-tooltip) + 1);
  text-decoration: none; font-weight: 600;
  border-end-end-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.bb-skip-link:focus { top: 0; }

/* ── Content Containers ──────────────────────────────────────── */
.bb-content {
  width: 100%; max-width: var(--content-max);
  margin-inline: auto; padding-inline: var(--space-4);
}
.bb-content--comfortable { max-width: var(--content-comfortable); }
.bb-content--narrow { max-width: var(--content-narrow); }

@media (min-width: 992px)  { .bb-content { padding-inline: var(--space-5); } }
@media (min-width: 1200px) { .bb-content { padding-inline: var(--space-6); } }

/* ── Scrollbar ───────────────────────────────────────────────── */
.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--text-light, #9ca3af) transparent;
}
.thin-scrollbar::-webkit-scrollbar { width: 6px; }
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--text-light, #9ca3af); border-radius: 999px;
}

/* ── Focus ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #009fff);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* ============================================================
   TOP NAVIGATION
   Reference discipline: compact 56px bar, single accent for
   active states, search with keyboard shortcut, streak pill.
   ============================================================ */
.bb-topnav {
  display: flex; align-items: center;
  height: 100%; padding: 0 var(--space-5);
  gap: var(--space-5);
  background: var(--bb-surface, #fff);
  border-bottom: 1px solid var(--bb-border, #e2e8f0);
}

.bb-topnav__brand {
  display: flex; align-items: center;
  gap: var(--space-2); flex-shrink: 0;
  font-family: var(--font-display, serif);
  font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none; color: inherit;
}

.bb-topnav__search {
  flex: 1; max-width: 440px;
  display: flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-3);
  background: var(--bs-body-bg, #f8f9fa);
  border: 1px solid var(--bb-border, #e2e8f0);
  border-radius: var(--radius-sm);
  color: var(--text-light, #9ca3af);
  font-size: 13px;
  transition: border-color var(--transition-fast);
}
.bb-topnav__search:hover,
.bb-topnav__search:focus-within {
  border-color: var(--accent, #009fff);
}
.bb-topnav__search kbd {
  margin-left: auto;
  font-family: var(--font-mono, monospace); font-size: 11px;
  background: var(--bs-tertiary-bg, #e9ecef);
  border: 1px solid var(--bb-border, #e2e8f0);
  border-radius: 4px; padding: 1px 5px;
  color: var(--text-light, #9ca3af);
}

.bb-topnav__actions {
  display: flex; align-items: center;
  gap: var(--space-3); flex-shrink: 0;
}

/* Streak pill — motivational signal like the reference */
.bb-streak-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-full);
  background: var(--bb-surface-hover, #f8fafc);
  border: 1px solid var(--bb-border, #e2e8f0);
  font-family: var(--font-mono, monospace); font-size: 12px;
  color: var(--warning, #F59E0B);
}

/* Icon button — compact, no border, surface on hover */
.bb-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: transparent; border: none;
  color: var(--text-secondary, #4b5563);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.bb-icon-btn:hover { background: var(--bb-surface-hover, #f8fafc); color: var(--text-primary, #111827); }
.bb-icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #009fff);
  border: 1.5px solid var(--bb-surface, #fff);
}

/* Desktop nav links (icon + label, stacked) */
.bb-topnav-link {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: var(--space-2);
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-secondary, #4b5563);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.bb-topnav-link:hover,
.bb-topnav-link[aria-current="page"] {
  color: var(--accent, #009fff);
}
.bb-topnav-link i { font-size: 1.25rem; }

@media (max-width: 859px) {
  .bb-topnav__search { display: none; }
}

/* ============================================================
   SIDEBAR — Bootstrap-first, dark-mode-responsive.
   Uses Bootstrap card for visual separation from background.
   Signature detail: sliding accent rail on active nav item.
   Collapsible: 240px → 64px icon-only rail.
   ============================================================ */

/* ── Sidebar container ────────────────────────────────────────
   Clean, flat, top-navbar-inspired. No rounded corners.
   bg-body-tertiary gives subtle separation from main content
   and automatically responds to [data-bs-theme="dark"]. */
.bb-sidebar {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bs-light, #f8f9fa);
  border-right: 1px solid var(--bs-border-color, var(--bb-border, #e2e8f0));
  transition: width var(--transition-base);
}

.bb-sidebar.is-collapsed {
  width: var(--sidebar-width-collapsed);
}

/* ── Sidebar column — sticky, full-height, self-scrolling ──────
   Sticks to the viewport top so the sidebar travels with the user
   while the main content scrolls independently.
   NB: the desktop topbar (__top-nav-bar.html) uses d-md-none so
   it is hidden on the same breakpoints where this sidebar appears;
   therefore no top-offset is needed. */
.bb-sidebar-col {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-tertiary-color, #9ca3af) transparent;
}
.bb-sidebar-col::-webkit-scrollbar { width: 6px; }
.bb-sidebar-col::-webkit-scrollbar-track { background: transparent; }
.bb-sidebar-col::-webkit-scrollbar-thumb {
  background-color: var(--bs-tertiary-color, #9ca3af);
  border-radius: 999px;
}

/* ── Sidebar nav inner — fills column height exactly so children
   can use percentage heights (height: 100% requires an explicit
   parent height per CSS spec; min-height does not qualify). */
.bb-sidebar-nav {
  display: flex;
  flex-direction: column;
  height: 100%; /* explicit — unbreaks the %-height chain for children */
}

/* ── Nav group ────────────────────────────────────────────────── */
.bb-sidebar-group { margin-bottom: var(--space-4); }
.bb-sidebar-group:last-child { margin-bottom: 0; }

/* Section label — subtle, uppercase, track-wide */
.bb-sidebar-group__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-tertiary-color, var(--text-light, #9ca3af));
  padding: var(--space-2) var(--space-3) var(--space-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* ── Nav list — neutralize Bootstrap list-group conflicts ───── */
.bb-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px; /* hairline gap so hover glows don't bleed */
}

/* Kill Bootstrap list-group defaults inside sidebar groups */
.bb-sidebar-group .list-group {
  border-radius: 0 !important;
  --bs-list-group-border-radius: 0;
  --bs-list-group-border-width: 0;
  --bs-list-group-bg: transparent;
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-item-padding-y: 0;
  gap: 1px;
  display: flex;
  flex-direction: column;
}
.bb-sidebar-group .list-group-item {
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.bb-sidebar-group .list-group-item + .list-group-item {
  border-top: none !important;
}

/* ── Nav item — flat, square, accent-rail on left ───────────── */
.bb-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: 6px;
  color: var(--bs-secondary-color, var(--text-secondary, #4b5563));
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: background 150ms ease,
              color 150ms ease,
              border-color 150ms ease;
}
.bb-sidebar-item:hover {
  background: var(--bs-tertiary-bg, rgba(0,0,0,0.04));
  color: var(--bs-body-color, var(--text-primary, #111827));
}
.bb-sidebar-item:focus-visible {
  outline: 2px solid var(--accent, #009fff);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Active: accent-soft bg + accent text + accent left rail */
.bb-sidebar-item.active {
  color: var(--accent, #009fff);
  background: var(--accent-soft, rgba(0,159,255,0.08));
  font-weight: 600;
}
.bb-sidebar-item.active .bb-sidebar-item__icon {
  color: var(--accent, #009fff);
}

/* ── Nav item children ───────────────────────────────────────── */
.bb-sidebar-item__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: inherit;
  transition: color 150ms ease;
}
.bb-sidebar-item__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-sidebar-item__count {
  font-family: var(--font-mono, "SF Mono", "Cascadia Code", monospace);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bs-secondary-color, #6b7280);
  background: var(--bs-tertiary-bg, #f3f4f6);
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px; /* pill badge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
/* Count badge inherits accent when parent is active */
.bb-sidebar-item.active .bb-sidebar-item__count {
  color: var(--accent, #009fff);
  background: rgba(0,159,255,0.12);
}

/* ── Collapsed: hide text, show icons only ──────────────────── */
.bb-sidebar.is-collapsed .bb-sidebar-group__label,
.bb-sidebar.is-collapsed .bb-sidebar-item__label,
.bb-sidebar.is-collapsed .bb-sidebar-item__count {
  opacity: 0;
  pointer-events: none;
}

/* ── Quick-action links ──────────────────────────────────────── */
.bb-sidebar-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: 6px;
  color: var(--accent, #009fff);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease,
              border-color 150ms ease,
              color 150ms ease;
}
.bb-sidebar-quick-action:hover {
  background: var(--accent-soft, rgba(0,159,255,0.06));
  color: var(--accent-hover, #0088dd);
}
.bb-sidebar-quick-action:focus-visible {
  outline: 2px solid var(--accent, #009fff);
  outline-offset: -2px;
  border-radius: 6px;
}
.bb-sidebar-quick-action i {
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Quick-action list container ────────────────────────────── */
.bb-sidebar-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Neutralize Bootstrap list-group inside quick-actions too */
.bb-sidebar-quick-actions.list-group {
  border-radius: 0 !important;
  --bs-list-group-border-width: 0;
  --bs-list-group-bg: transparent;
}
.bb-sidebar-quick-actions .list-group-item,
.bb-sidebar-quick-actions.list-group-item {
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ── Sidebar inner cards — flat, square, no shadows ───────── */
.bb-sidebar-body {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  flex: 1; overflow-y: auto;
}

/* Sidebar cards: square, clean borders, no glow */
.bb-sidebar .card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--bs-border-color, var(--bb-border, #e2e8f0)) !important;
}

/* ── Weekly goal (bottom of sidebar) ────────────────────────
   Uses Bootstrap card for dark-mode support. */
.bb-sidebar-progress {
  margin-top: auto;
}
.bb-sidebar-progress__header {
  font-size: 12px;
  font-weight: 500;
  color: var(--bs-secondary-color, var(--text-secondary, #4b5563));
  margin-bottom: var(--space-2);
}
.bb-sidebar-progress__bar {
  height: 6px;
  background: var(--bs-border-color, var(--bb-border, #e2e8f0));
  border-radius: 0;
  overflow: hidden;
}
.bb-sidebar-progress__fill {
  height: 100%;
  background: var(--accent, #009fff);
  border-radius: 0;
  transition: width 300ms ease;
}
.bb-sidebar.is-collapsed .bb-sidebar-progress { display: none; }

/* ── Sidebar profile card ─────────────────────────────────── */
.bb-sidebar-profile {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bb-sidebar-profile .profile-img {
  height: 56px !important;
  width: 56px !important;
  border: 2px solid var(--accent, #009fff) !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
.bb-sidebar-profile .stat-number {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1px !important;
  line-height: 1.1 !important;
  color: var(--bs-body-color, #111827);
}
.bb-sidebar-profile .stat-label {
  font-size: 0.68rem !important;
  color: var(--bs-tertiary-color, #718096) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bb-sidebar-profile .username-link {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bs-body-color, #111827);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.bb-sidebar-profile .username-link:hover {
  color: var(--accent, #009fff);
}

/* ── Sidebar footer links ───────────────────────────────────── */
.bb-sidebar-footer {
  font-family: var(--font-body);
}
.bb-sidebar-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bb-sidebar-footer__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
.bb-sidebar-footer__link {
  color: var(--bs-tertiary-color, #666);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.25rem 0;
  transition: color 0.15s ease-in-out;
  white-space: nowrap;
}
.bb-sidebar-footer__link:hover {
  color: var(--accent, #009fff);
  text-decoration: underline;
}

/* ── Activity Graph (GitHub-style heatmap in sidebar) ────────
   Empty cell uses --bs-border-color for automatic dark mode. */
.activity-graph {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 1.5px;
  padding: 2px 0;
}

.activity-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--bs-border-color, #e2e8f0);
}

.activity-level-1 { background: #73c9ff; }
.activity-level-2 { background: #51bcff; }
.activity-level-3 { background: #2da8ff; }
.activity-level-4 { background: #009fff; }

/* ============================================================
   MOBILE: off-canvas sidebar drawer
   Reference: transform off-screen, slides in on mobile-open
   ============================================================ */
.bb-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.35);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal-bg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.bb-overlay.is-visible { opacity: 1; visibility: visible; }

.bb-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(85vw, 320px);
  background: var(--bb-surface, #fff);
  z-index: var(--z-modal);
  transform: translateX(-100%);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.bb-drawer.is-open { transform: translateX(0); }

@media (min-width: 992px) {
  .bb-drawer { display: none; }
}

/* ── Hide on scroll (mobile topbar) ──────────────────────────── */
.bb-topbar--hide-mobile { transition: transform var(--transition-base); }
@media (max-width: 991.98px) {
  .bb-topbar--hide-mobile.is-hidden { transform: translateY(-100%); }
}

/* ============================================================
   MOBILE BOTTOM NAV
   Compact, spread across width, safe-area-aware.
   ============================================================ */
.bb-bottomnav {
  display: flex; align-items: center; justify-content: space-around;
  width: 100%; height: var(--bottom-nav-height);
}
.bb-bottomnav-link {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  flex: 1 1 0; height: 100%;
  font-size: 0.65rem; font-weight: 500;
  color: var(--text-secondary, #4b5563);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.bb-bottomnav-link[aria-current="page"] { color: var(--accent, #009fff); }
.bb-bottomnav-link i { font-size: 1.4rem; }