/*
  Sidebar component — collapsible-to-icon-rail with a hover flyout,
  recursive nav (section -> item -> subitem), light theme by default.
  Adapted from ~/projects/personal/components/sidebar for sensor-platform:
  bootstrap-icon support, active-row styling, before/after-nav slots for the
  project switcher and user/language/build-info blocks, and a mobile
  slide-in overlay variant of the same sidebar (no separate mobile nav).

  Theming: every color/size is a CSS custom property on .sidebar-root.
*/

.sidebar-root {
  --sb-width-collapsed: 72px;
  --sb-width-expanded: 268px;
  --sb-transition: 0.18s ease;

  --sb-bg: #ffffff;
  --sb-border: #e0e0e0;
  --sb-hover-header: #f8f9fa;
  --sb-hover-row: #f8f9fa;

  --sb-accent: var(--brand-color, #0f0859);
  --sb-accent-fg: #ffffff;

  --sb-text-strong: #1a1a1a;
  --sb-text-muted: #6c757d;

  --sb-text-section: #495057;
  --sb-text-section-hover: var(--brand-color, #0f0859);
  --sb-text-item: #6c757d;
  --sb-text-item-hover: var(--brand-color, #0f0859);
  --sb-text-sub: #6c757d;
  --sb-text-sub-hover: var(--brand-color, #0f0859);

  --sb-icon-bg: #f8f9fa;
  --sb-icon-fg: #495057;

  --sb-chevron: #adb5bd;
  --sb-chevron-sub: #ced4da;

  --sb-footer-text: #6c757d;
  --sb-footer-text-hover: var(--brand-color, #0f0859);

  --sb-scrollbar: #dee2e6;
  --sb-guide: #e9ecef;

  --sb-active-bg: rgba(15, 8, 89, 0.1);
  --sb-active-fg: var(--brand-color, #0f0859);
  --sb-active-border: var(--brand-color, #0f0859);

  height: 100%;
  flex-shrink: 0;
  position: relative;
  /* Above regular page content (fixed/absolute headers, timeline bars, etc.)
     so the hover-flyout and mobile slide-in always render on top of it,
     but still below app-wide overlays like modals/toasts. */
  z-index: 1040;
  transition: width var(--sb-transition), background var(--sb-transition), border-color var(--sb-transition);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

[data-theme="dark"] .sidebar-root {
  --sb-bg: oklch(0.19 0.015 250);
  --sb-border: oklch(0.28 0.015 250);
  --sb-hover-header: oklch(0.23 0.015 250);
  --sb-hover-row: oklch(0.25 0.015 250);

  --sb-accent-fg: oklch(0.99 0 0);

  --sb-text-strong: oklch(0.94 0.005 250);
  --sb-text-muted: oklch(0.6 0.01 250);

  --sb-text-section: oklch(0.85 0.005 250);
  --sb-text-section-hover: oklch(0.96 0.005 250);
  --sb-text-item: oklch(0.72 0.008 250);
  --sb-text-item-hover: oklch(0.92 0.005 250);
  --sb-text-sub: oklch(0.6 0.008 250);
  --sb-text-sub-hover: oklch(0.88 0.005 250);

  --sb-icon-bg: oklch(0.27 0.015 250);
  --sb-icon-fg: oklch(0.8 0.01 250);

  --sb-chevron: oklch(0.55 0.01 250);
  --sb-chevron-sub: oklch(0.5 0.01 250);

  --sb-footer-text: oklch(0.65 0.008 250);
  --sb-footer-text-hover: oklch(0.9 0.005 250);

  --sb-scrollbar: oklch(0.35 0.02 250);
  --sb-guide: oklch(0.32 0.016 250);

  --sb-active-bg: oklch(0.27 0.03 250);
}

.sidebar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  transition: width var(--sb-transition), background var(--sb-transition), border-color var(--sb-transition);
}

.sidebar-inner[data-flyout="true"] {
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Header: logo + collapse toggle ---------- */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}

.sidebar-inner[data-expanded="false"] .sidebar-header {
  justify-content: center;
  padding: 0 8px;
}

.sidebar-inner[data-expanded="false"] .sidebar-header-collapse {
  display: none;
}

.sidebar-header-logo,
.sidebar-header-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
}

.sidebar-header-logo:hover,
.sidebar-header-collapse:hover {
  background: var(--sb-hover-header);
}

.sidebar-header-collapse i {
  font-size: 1.05rem;
  color: var(--sb-footer-text);
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: var(--sb-accent);
  color: var(--sb-accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  transition: width var(--sb-transition), height var(--sb-transition);
}

.sidebar-inner[data-expanded="false"] .sidebar-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.sidebar-avatar-img {
  background: none;
  object-fit: contain;
}

/* ---------- Before/after-nav static slots ---------- */

.sidebar-before-nav:empty,
.sidebar-after-nav:empty {
  display: none;
}

/* Collapsed rail: the project-selector's own border-bottom disappears along
   with it (display: none), so re-draw the separator under the badge that
   replaces it, spanning the full rail width. */
.sidebar-inner[data-expanded="false"] .sidebar-before-nav {
  border-bottom: 1px solid var(--sb-border);
}

/* Elements shown only while the rail is the icon-only 72px state (hidden as
   soon as it's expanded, including mid hover-flyout) — the inverse of
   .sidebar-text. Used for the collapsed project-initials badge. */
.sidebar-collapsed-only {
  display: none;
}

.sidebar-inner[data-expanded="false"] .sidebar-collapsed-only {
  display: flex;
}

/* ---------- Nav ---------- */

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-scrollbar) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--sb-scrollbar);
  border-radius: 3px;
}

.sidebar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: var(--sb-text-section);
  white-space: nowrap;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

.sidebar-row:hover {
  background: var(--sb-hover-row);
  color: var(--sb-text-section-hover);
}

.sidebar-row[data-active="true"] {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  font-weight: 600;
}

.sidebar-row-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 5px;
  background: var(--sb-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--sb-icon-fg);
}

.sidebar-row[data-active="true"] .sidebar-row-icon {
  background: var(--sb-accent);
  color: var(--sb-accent-fg);
}

.sidebar-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sidebar-chevron {
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 4.5px solid var(--sb-chevron);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.sidebar-row[data-open="true"] .sidebar-chevron {
  transform: rotate(90deg);
}

.sidebar-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px 30px;
}

.sidebar-items::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 21px;
  width: 1px;
  background: var(--sb-guide);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: var(--sb-text-item);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

.sidebar-item:hover {
  background: var(--sb-hover-row);
  color: var(--sb-text-item-hover);
}

.sidebar-item[data-active="true"] {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  font-weight: 600;
}

.sidebar-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item-chevron {
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid var(--sb-chevron-sub);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.sidebar-item[data-open="true"] .sidebar-item-chevron {
  transform: rotate(90deg);
}

.sidebar-subitems {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 14px;
}

.sidebar-subitems::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 1px;
  background: var(--sb-guide);
}

.sidebar-subitem {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: var(--sb-text-sub);
  font: inherit;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

.sidebar-subitem:hover {
  background: var(--sb-hover-row);
  color: var(--sb-text-sub-hover);
}

.sidebar-subitem[data-active="true"] {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  font-weight: 600;
}

/* ---------- Collapsed-state text hiding / row centering ---------- */

.sidebar-inner[data-expanded="false"] .sidebar-text {
  display: none;
}

.sidebar-inner[data-expanded="false"] .sidebar-row {
  justify-content: center;
}

/* ---------- Mobile: slide-in overlay of the same sidebar ---------- */

@media (max-width: 991px) {
  .sidebar-root {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sb-width-expanded) !important;
    min-width: var(--sb-width-expanded) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .sidebar-root.mobile-active {
    transform: translateX(0);
  }

  .sidebar-inner {
    width: var(--sb-width-expanded) !important;
  }

  .sidebar-header-collapse {
    display: none;
  }
}