/* Analytics Page Redesign - Dashboard Grid Layout */

/* Insights + Logbook shell */
.insights-shell {
  width: 100%;
}

body[data-mode="app"] .analytics-page > .container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--header-padding-x, var(--page-gutter)) var(--ts-spacing-xl);
  padding-top: 0; /* Remove top padding to align with header */
}


.insights-stage {
  min-height: 0;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  padding: var(--ts-spacing-lg);
  margin-top: 0; /* Remove top margin to align directly with header */
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: minmax(320px, 28vw) minmax(0, 1fr);
  gap: var(--ts-spacing-lg);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
  max-width: 100%;
  --logbook-flag-offset: 12px;
  --logbook-flag-width: var(--vs-spine-width, 44px);
}

.insights-logbook {
  display: flex;
  gap: var(--ts-spacing-sm);
  padding: 0;
  align-self: start;
  height: calc(100vh - var(--header-h, 66px));
  position: sticky;
  top: var(--header-h, 66px); /* Align with header bottom, no extra margin */
}

.insights-content {
  padding: 0;
  padding-bottom: 0; /* Remove bottom padding to allow section margins to control spacing */
  min-width: 0;
}

.insights-shell[data-logbook-state="expanded"] .insights-stage {
  grid-template-columns: minmax(320px, 28vw) minmax(0, 1fr);
}

.insights-shell[data-logbook-state="collapsed"] .insights-stage {
  grid-template-columns: var(--logbook-flag-width, 44px) minmax(0, 1fr);
  gap: var(--ts-spacing-md);
}

.insights-shell[data-logbook-state="expanded"] .insights-content {
  max-width: 100%;
  width: 100%;
}

.insights-shell[data-logbook-state="expanded"] .analytics-dashboard-grid {
  grid-template-columns: 1fr;
}

.insights-logbook {
  min-height: 0;
}

.insights-shell[data-logbook-state="collapsed"] .insights-logbook {
  width: var(--logbook-flag-width, 44px);
  min-width: var(--logbook-flag-width, 44px);
  align-self: stretch;
  padding: 0;
  position: sticky;
  top: calc(var(--header-h, 66px) + var(--ts-spacing-lg));
  height: calc(100vh - var(--header-h, 66px) - (var(--ts-spacing-lg) * 2));
  justify-content: center;
}

.insights-shell[data-logbook-state="expanded"] .insights-logbook {
  width: 100%;
  min-width: 0;
}

.insights-shell[data-logbook-state="collapsed"] .insights-logbook::before {
  display: none;
}

.insights-shell[data-logbook-state="collapsed"] .insights-logbook::after {
  display: none;
}

/* Legacy support - now uses frosted-spine component */
.logbook-rail-tab {
  /* Inherit from frosted-spine component */
  width: var(--logbook-flag-width, 44px);
  min-width: var(--logbook-flag-width, 44px);
}

.insights-shell[data-logbook-state="collapsed"] .logbook-rail-tab {
  height: 100%;
  border-radius: var(--vs-spine-radius, 14px);
}

/* Legacy icon and label styles - now handled by frosted-spine component */
/* All styles are inherited from .vs-frosted-spine, .vs-frosted-spine__icon, and .vs-frosted-spine__label */

.logbook-rail-tab:hover,
.logbook-rail-tab:focus-visible {
  border-color: var(--vs-spine-accent, rgba(79, 209, 255, 0.6));
  box-shadow: 0 0 0 3px rgba(79, 209, 255, 0.18), var(--vs-spine-shadow, 0 10px 24px rgba(16, 24, 40, 0.08));
  outline: none;
}


.logbook-panel {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border-subtle);
  border-radius: var(--ts-radius-lg);
  padding: 0;
  box-shadow: var(--ts-shadow-soft);
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: var(--ts-spacing-md);
  overflow: hidden;
  min-height: 0;
}

/* Ensure load-more section is visible and not cut off */
.logbook-panel .load-more-section {
  flex-shrink: 0;
  margin-top: auto;
  padding: var(--ts-spacing-md);
}

.logbook-panel,
.logbook-panel * {
  visibility: visible;
  opacity: 1;
}

.insights-shell[data-logbook-state="collapsed"] .logbook-panel {
  display: none;
}

/* Mobile override: Always show panel when drawer is active */
@media screen and (max-width: 768px) {
  .insights-logbook.active .logbook-panel,
  .insights-shell[data-logbook-state="expanded"] .insights-logbook .logbook-panel {
    display: flex !important;
  }
}

.logbook-panel .history-header {
  padding: var(--ts-spacing-md);
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-spacing-md);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.logbook-panel .history-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.logbook-panel .history-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.logbook-panel .history-subtitle {
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.logbook-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ts-text-muted);
}

.logbook-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.9);
}

.logbook-status.is-live {
  color: #0f766e;
}

.logbook-status.is-live::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.logbook-status.is-error {
  color: #b91c1c;
}

.logbook-status.is-error::before {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.logbook-archive-banner {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(14, 116, 144, 0.12);
  border: 1px solid rgba(14, 116, 144, 0.2);
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.insights-content {
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.logbook-panel .history-search {
  padding: 0 var(--ts-spacing-md) var(--ts-spacing-sm);
}

.logbook-panel .history-search-input {
  width: 100%;
}

.analytics-dashboard-grid,
.analytics-main-content,
.analytics-sidebar {
  min-width: 0;
  width: 100%;
}

.analytics-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(260px, 28vw, 360px));
  width: 100%;
}

.analytics-main-content,
.analytics-sidebar {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.analytics-dashboard-grid .chart-card,
.analytics-dashboard-grid .chart-container,
.analytics-dashboard-grid canvas {
  max-width: 100%;
}

.insights-graph {
  height: 320px;
}

.insights-radar {
  height: 260px;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-spacing-md);
  overflow-y: auto;
  flex: 1;
  padding: 0 var(--ts-spacing-md) var(--ts-spacing-md);
  min-height: 0;
}

.logbook-entry {
  border: 1px solid var(--ts-border-subtle);
  border-radius: 14px;
  background: #ffffff;
  padding: 0;
  box-shadow: var(--ts-shadow-subtle);
}

.logbook-entry summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ts-spacing-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logbook-entry summary::-webkit-details-marker {
  display: none;
}

.logbook-entry-meta {
  display: flex;
  gap: var(--ts-spacing-sm);
  font-size: 0.75rem;
  color: var(--ts-text-muted);
}

.logbook-entry-title {
  font-size: 0.95rem;
  color: var(--ts-text-main);
  font-weight: 600;
}

.logbook-entry-signals {
  display: grid;
  gap: 6px;
}

.signal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-spacing-sm);
  font-size: 0.82rem;
  color: var(--ts-text-muted);
}

.signal-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
}

.signal-bar {
  width: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}

.signal-bar:nth-child(1) { height: 8px; }
.signal-bar:nth-child(2) { height: 11px; }
.signal-bar:nth-child(3) { height: 14px; }
.signal-bar:nth-child(4) { height: 11px; }
.signal-bar:nth-child(5) { height: 8px; }

.signal-bar.is-on {
  background: var(--ts-accent);
}

.logbook-entry-body {
  padding: 0 var(--ts-spacing-md) var(--ts-spacing-md);
  color: var(--ts-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.logbook-entry-body p {
  margin: 0 0 8px 0;
}

.logbook-entry-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .insights-stage {
    grid-template-columns: 1fr;
    padding: var(--ts-spacing-md);
  }

  .insights-shell[data-logbook-state="expanded"] .insights-stage {
    grid-template-columns: 1fr;
  }

  .insights-shell[data-logbook-state="expanded"] .insights-content {
    max-width: 100%;
  }

  .logbook-rail-tab span {
    writing-mode: initial;
    transform: none;
  }

  .logbook-panel .history-toggle {
    display: inline-flex;
  }
}

/* ===== MOBILE NATIVE AI LOGBOOK INTERFACE ===== */
/* Full-bleed layout for mobile - edge-to-edge design */

@media screen and (max-width: 860px) {
  /* Prevent horizontal overflow - handle extends over edge naturally */
  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove all padding/margins for full-bleed */
  body[data-mode="app"] .analytics-page > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Full-bleed insights stage */
  .insights-stage {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Hide sidebar on mobile - will be shown as drawer */
  .insights-logbook {
    position: fixed;
    right: 0;
    top: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    border: none;
    border-left: 1px solid rgba(148, 163, 184, 0.24);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Ensure logbook panel is visible in drawer - override collapsed state */
  .insights-logbook .logbook-panel {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Override collapsed state on mobile when drawer is open - panel must always be visible */
  /* Use high specificity to override the collapsed state rule */
  .insights-logbook.active .logbook-panel,
  .insights-shell[data-logbook-state="expanded"] .insights-logbook .logbook-panel,
  .insights-shell[data-logbook-state="collapsed"] .insights-logbook.active .logbook-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hide rail tab in drawer mode */
  .insights-logbook .logbook-rail-tab {
    display: none;
  }

  /* Ensure projects list is visible and scrollable */
  .insights-logbook .projects-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Ensure load-more section is visible at bottom */
  .insights-logbook .load-more-section {
    flex-shrink: 0;
    padding: var(--ts-spacing-md);
    margin-top: auto;
  }

  /* Open drawer when logbook is expanded on mobile */
  .insights-shell[data-logbook-state="expanded"] .insights-logbook,
  .insights-logbook.active {
    transform: translateX(0) !important;
  }

  /* Overlay when drawer is open */
  .logbook-overlay-analytics {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .logbook-overlay-analytics.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Insights content - full bleed */
  .insights-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--ts-spacing-md) !important;
    padding-bottom: calc(var(--ts-spacing-md) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  /* Logbook Handle - Glass effect with signal gradient text */
  /* Use shared styling with workspace .logbook-handle for consistency */
  .logbook-handle-analytics,
  .logbook-handle {
    position: fixed;
    right: 0; /* Affixed to window edge - fully visible */
    top: 50%;
    transform: translateY(-50%);
    width: var(--logbook-flag-width, 44px);
    min-width: var(--logbook-flag-width, 44px);
    border-radius: var(--vs-spine-radius, 14px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Glass effect: semi-transparent white with backdrop blur */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 
      0 8px 32px rgba(16, 24, 40, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    transition: all 150ms ease;
    z-index: 3000; /* Higher than drawer (2000) and overlay (1999) */
    /* Prevent position recalculation when viewport changes (keyboard appears) */
    will-change: transform;
    /* Ensure position is locked and doesn't shift with viewport changes */
    contain: layout style paint;
  }

  /* Signal icon styling - shared */
  .logbook-handle-analytics .signal-mark-inline,
  .logbook-handle .signal-mark-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
  }

  .logbook-handle-analytics:hover .signal-mark-inline,
  .logbook-handle:hover .signal-mark-inline {
    opacity: 1;
  }

  /* Text styling - glass effect with signal gradient running inside */
  .logbook-handle-analytics span:not(.signal-mark-inline),
  .logbook-handle span:not(.signal-mark-inline) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: transparent;
    /* Signal gradient running inside glass lettering */
    background-image: linear-gradient(120deg, var(--vs-signal-500, #7fd7ff), var(--vs-signal-600, #4fb3c8));
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    line-height: 1;
    /* Glass text effect: subtle glow */
    filter: drop-shadow(0 0 2px rgba(127, 215, 255, 0.3));
    font-weight: 600;
  }

  /* Shared hover states - enhanced glass effect */
  .logbook-handle-analytics:hover,
  .logbook-handle-analytics:focus-visible,
  .logbook-handle:hover,
  .logbook-handle:focus-visible {
    border-color: rgba(79, 209, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 
      0 12px 40px rgba(16, 24, 40, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.2) inset,
      0 0 20px rgba(79, 209, 255, 0.2);
    outline: none;
  }
  
  .logbook-handle-analytics:hover span:not(.signal-mark-inline),
  .logbook-handle:hover span:not(.signal-mark-inline) {
    filter: drop-shadow(0 0 4px rgba(127, 215, 255, 0.5));
  }

  .logbook-handle-analytics:active,
  .logbook-handle:active {
    opacity: 0.8;
    transform: translateY(-50%) scale(0.95);
  }

  /* Move handle when drawer is open - align with drawer edge */
  /* Drawer is 85% width from right, so drawer left edge is at 15% */
  .logbook-handle-analytics.active,
  .logbook-handle.active {
    right: 85%; /* Align with drawer left edge - right aligned */
  }

  /* Page header - compact for mobile, aligned with header */
  .vs-pagehead {
    padding: 12px var(--header-padding-x, var(--page-gutter, 18px)) 8px !important;
    margin-left: 0 !important;
    margin-bottom: var(--ts-spacing-md) !important;
    margin-top: 0 !important;
    max-width: 100% !important;
  }

  .vs-pagehead__title h1 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .vs-pagehead__title p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }

  .vs-pagehead__controls {
    flex-direction: row;
    gap: var(--ts-spacing-md);
    align-items: flex-end;
    justify-content: flex-start; /* Left align to match content below */
  }

  .vs-control-group {
    display: flex;
    align-items: flex-end;
    gap: var(--ts-spacing-md);
    justify-content: flex-start; /* Left align controls */
    margin-left: 0; /* Remove auto margin for left alignment */
  }

  .vs-control {
    width: auto;
    min-width: 140px;
  }

  .vs-control select {
    width: 100%;
  }

  .vs-btn {
    width: auto;
    white-space: nowrap;
  }

  /* Metrics - stack vertically on mobile */
  .vs-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--ts-spacing-sm) !important;
    margin-bottom: var(--ts-spacing-md) !important;
  }

  .vs-metric {
    padding: var(--ts-spacing-sm) !important;
  }

  .vs-metric__value {
    font-size: 1.25rem !important;
  }

  /* Charts - full width, responsive */
  .vs-chart,
  .chart-container,
  canvas {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Subnav - horizontal scrollable */
  .vs-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--ts-spacing-xs);
    margin-bottom: var(--ts-spacing-md);
  }

  .vs-subnav::-webkit-scrollbar {
    display: none;
  }

  .vs-subnav__list {
    display: flex;
    gap: var(--ts-spacing-sm);
    min-width: max-content;
  }

  .vs-subnav__item {
    flex-shrink: 0;
  }

  /* Prevent body scroll when drawer is open */
  body.logbook-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

}

/* Legacy mobile styles - keep for compatibility */
@media (max-width: 768px) {
  .insights-shell[data-logbook-state="collapsed"] .insights-stage {
    grid-template-columns: 1fr;
    gap: var(--ts-spacing-md);
  }

  .insights-shell[data-logbook-state="collapsed"] .insights-content {
    display: block;
    width: 100%;
  }

  /* Legacy collapsed state - overridden by new mobile drawer styles above */
  .insights-shell[data-logbook-state="collapsed"] .insights-logbook {
    /* Styles moved to mobile-native section above */
  }

  .logbook-rail-tab {
    height: 100%;
    width: 100%;
    min-width: 100%;
    border-radius: 999px;
    padding: 0;
    background-image:
      linear-gradient(var(--signal-blue), var(--signal-blue)),
      linear-gradient(var(--signal-blue), var(--signal-blue)),
      linear-gradient(var(--signal-blue), var(--signal-blue)),
      linear-gradient(var(--signal-blue), var(--signal-blue)),
      linear-gradient(var(--signal-blue), var(--signal-blue));
    background-repeat: no-repeat;
    background-size: 2px 8px, 2px 12px, 2px 16px, 2px 12px, 2px 8px;
    background-position:
      calc(50% - 8px) 50%,
      calc(50% - 4px) 50%,
      50% 50%,
      calc(50% + 4px) 50%,
      calc(50% + 8px) 50%;
    text-indent: -9999px;
    overflow: hidden;
  }

  .logbook-rail-tab span {
    display: none;
  }

  .logbook-rail-tab::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--signal-cyan) 0%, rgba(79, 209, 255, 0.4) 70%, transparent 100%);
    box-shadow: 0 0 10px rgba(79, 209, 255, 0.45);
  }

  .logbook-rail-tab::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--vs-spine-border, rgba(16, 24, 40, 0.12));
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  }

  /* Don't hide content on mobile when logbook is expanded - drawer overlays instead */
  @media (max-width: 768px) {
    .insights-shell[data-logbook-state="expanded"] .insights-content {
      display: block !important; /* Keep content visible, drawer overlays */
    }
  }
  
  /* Desktop: hide content when logbook is expanded (original behavior) */
  @media (min-width: 769px) {
    .insights-shell[data-logbook-state="expanded"] .insights-content {
      display: none;
    }
  }

  /* Desktop only - don't apply on mobile */
  @media (min-width: 769px) {
    .insights-shell[data-logbook-state="expanded"] .insights-logbook {
      position: relative;
      order: 1;
      width: 100%;
      height: auto;
    }
  }

  .insights-shell[data-logbook-state="expanded"] .logbook-rail-tab {
    display: none;
  }

  .insights-shell[data-logbook-state="expanded"] .logbook-panel {
    display: flex;
    position: fixed;
    inset: calc(var(--header-h, 66px) + 12px) 12px 12px 12px;
    width: auto;
    height: auto;
    max-height: none;
    z-index: 120;
  }

  /* Desktop: Ensure logbook is visible and properly positioned */
  @media (min-width: 769px) {
    .logbook-handle-analytics,
    .logbook-overlay-analytics {
      display: none !important;
    }
    
    .insights-logbook {
      position: relative !important;
      transform: none !important;
      width: auto !important;
      max-width: none !important;
      height: auto !important;
      box-shadow: none !important;
      border-radius: 16px !important;
      border: 1px solid rgba(148, 163, 184, 0.24) !important;
    }
  }

  .insights-shell[data-logbook-state="expanded"] #logbookPanel {
    display: flex !important;
  }

  .projects-list {
    gap: var(--ts-spacing-sm);
  }

  .logbook-entry {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: none;
  }

  .logbook-panel .history-header {
    padding: var(--ts-spacing-sm);
  }

  .logbook-panel .history-search {
    padding: 0 var(--ts-spacing-sm) var(--ts-spacing-sm);
  }

  .logbook-entry summary {
    padding: var(--ts-spacing-sm);
    gap: 6px;
  }

  .logbook-entry-title {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .logbook-entry-meta {
    font-size: 0.7rem;
  }

  .logbook-entry-signals {
    gap: 4px;
  }

  .signal-bars {
    gap: 2px;
  }

  .signal-bar.is-on {
    background: var(--signal-blue);
    box-shadow: 0 0 6px rgba(76, 201, 240, 0.45);
  }

  .signal-item {
    font-size: 0.75rem;
  }

  .logbook-entry-body {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .logbook-entry-body {
    display: none;
  }
}

.logbook-quickview {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 120;
}

.logbook-quickview.is-open {
  display: flex;
}

.logbook-quickview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.logbook-quickview__card {
  position: relative;
  width: min(520px, 100%);
  max-height: 80vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 16px;
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.18);
}

.logbook-quickview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.logbook-quickview__meta {
  font-size: 0.78rem;
  color: var(--ts-text-muted);
}

.logbook-quickview__close {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #fff;
  font-size: 0.72rem;
  padding: 6px 10px;
  cursor: pointer;
}

.logbook-quickview__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ts-text-main);
  margin-bottom: 10px;
}

.logbook-quickview__signals {
  margin-bottom: 12px;
}

.logbook-quickview__body {
  font-size: 0.82rem;
  color: var(--ts-text-muted);
  line-height: 1.5;
}

@media (min-width: 769px) {
  .logbook-quickview {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .analytics-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .analytics-sidebar {
    width: 100%;
  }
}

/* Sticky Filter Bar */
.analytics-filter-bar {
  position: sticky;
  top: var(--header-h, 66px);
  z-index: 100;
  background: var(--ts-surface);
  border-bottom: 1px solid var(--ts-border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--ts-spacing-md) var(--page-gutter);
  margin: calc(-1 * var(--ts-spacing-lg)) calc(-1 * var(--page-gutter)) var(--ts-spacing-xl);
}

.filter-bar-content {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ts-spacing-lg);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--ts-spacing-sm);
}

.filter-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ts-text);
}

.filter-description {
  font-size: 0.85rem;
  color: var(--ts-text-muted);
  margin: 0;
  margin-left: auto;
}

/* Dashboard Grid Layout */
.analytics-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--ts-spacing-xl);
  margin-top: var(--ts-spacing-xl);
}

.analytics-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--ts-spacing-2xl);
}

.analytics-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--ts-spacing-lg);
}

/* Hero Section - Skill Radar */
.analytics-hero {
  margin-bottom: 0;
}

.chart-card-hero {
  padding: var(--ts-spacing-xl);
  box-shadow: var(--ts-shadow-soft);
}

.chart-card-large {
  padding: var(--ts-spacing-lg);
}

/* Collapsible Sections */
.analytics-collapsible {
  margin-bottom: 0;
}

.collapsible-section {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border-subtle);
  border-radius: var(--ts-radius-lg);
  padding: var(--ts-spacing-md);
  box-shadow: var(--ts-shadow-subtle);
}

.collapsible-section summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ts-spacing-sm) 0;
}

.collapsible-section summary::-webkit-details-marker {
  display: none;
}

.collapsible-section summary::before {
  content: '▶';
  display: inline-block;
  margin-right: var(--ts-spacing-sm);
  transition: transform 0.2s ease;
  color: var(--ts-text-muted);
}

.collapsible-section[open] summary::before {
  transform: rotate(90deg);
}

.collapsible-section .chart-card {
  margin-top: var(--ts-spacing-md);
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Career Suggestions - Gamified Cards */
.career-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ts-spacing-lg);
}

.career-suggestion-card-gamified {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border-subtle);
  border-radius: var(--ts-radius-lg);
  padding: var(--ts-spacing-lg);
  box-shadow: var(--ts-shadow-subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career-suggestion-card-gamified:hover {
  transform: translateY(-2px);
  box-shadow: var(--ts-shadow-soft);
}

.career-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--ts-spacing-md);
}

.career-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ts-text);
  margin: 0;
}

.career-strength-badge {
  padding: 6px 14px;
  border-radius: var(--ts-radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.career-progress-section {
  margin-bottom: var(--ts-spacing-md);
}

.career-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ts-spacing-xs);
  font-size: 0.875rem;
  color: var(--ts-text-muted);
}

.career-progress-value {
  font-weight: 600;
  color: var(--ts-text);
}

.career-progress-bar {
  height: 10px;
  background: var(--ts-surface-soft);
  border-radius: var(--ts-radius-pill);
  overflow: hidden;
}

.career-progress-fill {
  height: 100%;
  border-radius: var(--ts-radius-pill);
  transition: width 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.career-card-reasoning {
  margin: var(--ts-spacing-md) 0;
  color: var(--ts-text-soft);
  line-height: 1.6;
  font-size: 0.9rem;
}

.career-skills-section {
  margin-top: var(--ts-spacing-md);
  padding-top: var(--ts-spacing-md);
  border-top: 1px solid var(--ts-border-subtle);
}

.career-skills-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ts-text);
  margin-bottom: var(--ts-spacing-sm);
}

.career-skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-spacing-sm);
}

.career-skill-tag {
  padding: 6px 12px;
  background: var(--ts-accent-soft);
  color: var(--ts-accent);
  border-radius: var(--ts-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.career-skill-tag:hover {
  background: var(--ts-accent);
  color: white;
}

/* Skill Graph - High Contrast Colors */
#graphContainer {
  background: var(--ts-surface);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .analytics-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .analytics-sidebar {
    order: -1; /* Show sidebar first on mobile */
  }

  .career-suggestions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .analytics-filter-bar {
    padding: var(--ts-spacing-sm) var(--ts-spacing-md);
  }

  .filter-bar-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ts-spacing-sm);
  }

  .filter-description {
    margin-left: 0;
  }

  .chart-card-hero {
    padding: var(--ts-spacing-md);
  }

  .chart-card-hero .chart-container {
    height: 400px !important;
  }

  .chart-card-large .chart-container {
    height: 500px !important;
  }
}