/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface2: #f9fafb;
  --border: #e5e7eb;
  --primary: #171717;
  --primary-mid: #404040;
  --primary-lite: #737373;
  --primary-pale: #e5e5e5;
  --text: #0a0a0a;
  --muted: #525252;
  --muted2: #a3a3a3;
  --warn: #d97706;
  --danger: #dc2626;
  --accent: #dc2626;
  --font-h: 'Source Serif 4', serif;
  --font-b: 'DM Sans', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  display: flex;
}

/* ═══════════════════════════════════════════════
   SIDEBAR — BASE (always applied)
   ═══════════════════════════════════════════════ */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ── Toggle button ── */
.sidebar-toggle {
  /* NOT absolute — lives in normal flow so it never overlaps */
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease,
    right 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Brand text */
.sidebar-brand {
  color: #fff;
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Full logo block — shown when expanded */
.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  /* leave room on the right for the toggle button */
  padding-right: 44px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

/* Mini logo — hidden when expanded */
.sidebar-logo-mini {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* sits BELOW the toggle button — no overlap */
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Nav labels */
.nav-label {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.18s ease, width 0.18s ease;
}

/* ═══════════════════════════════════════════════
   SIDEBAR — COLLAPSED STATE
   ═══════════════════════════════════════════════ */
.sidebar.collapsed {
  width: 56px;
}

/* Move toggle button to centre-top so it has its own space */
.sidebar.collapsed .sidebar-toggle {
  right: 50%;
  transform: translateX(50%);
  top: 12px;
}

/* Hide full logo, show mini */
.sidebar.collapsed .sidebar-logo {
  display: none;
}

.sidebar.collapsed .sidebar-logo-mini {
  display: flex;
}

/* Mini logo sits directly below the toggle button — clean gap */
.sidebar.collapsed .sidebar-logo-mini {
  margin-top: 48px;
  /* clears the absolute-positioned toggle (26px) + 12px top + gap */
}

/* Hide all text labels */
.sidebar.collapsed .nav-section-label {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
}

.sidebar.collapsed .nav-label {
  opacity: 0;
  width: 0;
}

.sidebar.collapsed .sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

.sidebar.collapsed .badge-text {
  display: none;
}

.sidebar.collapsed .logo-sub {
  display: none;
}

.sidebar.collapsed .ai-badge {
  display: none;
}

/* Centre icons */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
}

.sidebar.collapsed .nav-icon {
  font-size: 18px;
  width: auto;
}

/* ── Hover tooltips in collapsed mode ── */
.sidebar.collapsed .nav-item {
  position: relative;
}

.sidebar.collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #2a2a2a;
  color: #fff;
  font-size: 11px;
  font-family: var(--font-b);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.sidebar.collapsed .nav-item:hover::after {
  opacity: 1;
}

/* ── main area responds to sidebar width ── */
/* (handled via JS — same forceResizeAllCharts pattern) */


.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.logo-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.ai-badge {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-m);
  letter-spacing: 0.06em;
  width: fit-content;
  align-self: center;
}

.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.nav-section {
  padding: 14px 0 4px;
}

.nav-section-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 20px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all .15s;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-left-color: var(--danger);
}

.nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.sidebar-footer strong {
  color: rgba(255, 255, 255, 0.8);
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════
   MAIN AREA
   ═══════════════════════════════════════════════ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
  /* CRITICAL: prevents flex overflow */
}

/* ── Topbar ── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left h1 {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.topbar-left p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.period-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-family: var(--font-b);
  outline: none;
  cursor: pointer;
}

.sync-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-b);
  transition: background .15s;
}

.sync-btn:hover {
  background: var(--primary-mid);
}

/* ── Content / Dashboard container ── */
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.dashboard-container {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 84px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  min-width: 0;
  /* CRITICAL */
}

/* ═══════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kpi-card {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.kpi-card.g::before {
  background: var(--primary);
}

.kpi-card.gm::before {
  background: var(--primary-mid);
}

.kpi-card.w::before {
  background: var(--warn);
}

.kpi-card.d::before {
  background: var(--danger);
}

.kpi-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-value {
  font-family: var(--font-h);
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--text);
}

.kpi-delta {
  font-size: 12px;
}

.kpi-delta.pos {
  color: var(--primary);
}

.kpi-delta.neg {
  color: var(--danger);
}

.kpi-delta.warn {
  color: var(--warn);
}

/* ═══════════════════════════════════════════════
   CHART & TABLE CARDS
   ═══════════════════════════════════════════════ */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.chart-card {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
  /* CRITICAL */
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.chart-wrap {
  position: relative;
  height: 200px;
  width: 100%;
  min-width: 0;
  /* CRITICAL */
}

.table-card {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  padding: 0 0 10px;
}

td {
  padding: 9px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
}

td.mono {
  font-family: var(--font-m);
  font-size: 11px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}

/* ═══════════════════════════════════════════════
   CHAT FAB
   ═══════════════════════════════════════════════ */
.chat-fab-gif {
  width: 60%;
  height: 60%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1200;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.chat-fab:hover {
  background-color: #e5e5e5;
  transform: scale(1.08);
}

/* Hide FAB when chat is expanded (panel is always visible) */
.chat-fab.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   CHAT PANEL — BASE (floating bubble mode)
   ═══════════════════════════════════════════════ */
.chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1100;
  overflow: hidden;

  /* Hidden by default */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease,
    width 0s,
    height 0s,
    border-radius 0.3s ease,
    bottom 0.3s ease,
    right 0.3s ease;
}

.chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ═══════════════════════════════════════════════
   CHAT PANEL HEADER  — centred title
   ═══════════════════════════════════════════════ */

.chat-panel-header {
  position: relative;
  /* anchor for absolute buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  /* centres the title block */
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  min-height: 52px;
}

/* ── Centre identity block — sits in normal flow, centred by flex ── */
.chat-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  /* no flex:1, no justify-content override — just let it sit in centre */
  pointer-events: none;
  /* clicks fall through to header if needed */
}

.chat-title-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  pointer-events: all;
}

.chat-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-title-name {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  white-space: nowrap;
  line-height: 1.2;
}

.chat-title-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-b);
  line-height: 1;
}

.chat-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

/* ── Expand button — absolute left ── */
#expandChatBtn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

#expandChatBtn:hover {
  background: var(--surface2);
  color: var(--primary);
  border-color: var(--primary-mid);
}

#expandChatBtn.active {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--border);
}

#expandChatBtn svg {
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Close button — absolute right ── */
.chat-close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.chat-close-btn:hover {
  background: var(--surface2);
  border-color: var(--primary-mid);
  color: var(--primary);
}

.chat-close-btn svg {
  pointer-events: none;
}


/* ═══════════════════════════════════════════════
   CHAT PANEL — EXPANDED (right-sidebar mode)
   ═══════════════════════════════════════════════ */
.chat-panel.expanded {
  /* Override floating position */
  bottom: 0 !important;
  right: 0 !important;
  top: 0;
  height: 100vh !important;

  /* No rounded corners on the sides that touch the screen edge */
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);

  /* Always visible when expanded */
  opacity: 1 !important;
  transform: none !important;
  pointer-events: all !important;

  /* Width controlled via inline style from JS */
  transition: none;
  /* instant during drag resize */
}

/* When expanded, push the main content area left */
.main.chat-expanded {
  /* margin-right set dynamically via JS to match panel width */
  transition: margin-right 0s;
  /* instant during drag */
}

/* ═══════════════════════════════════════════════
   DRAG HANDLE
   ═══════════════════════════════════════════════ */
#chatDragHandle {
  display: none;
  /* shown by JS when expanded */
  position: fixed;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 1150;
  /* right is set dynamically by JS */
}

/* Pill indicator inside the handle */
#dragHandleVisual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 48px;
  background: var(--border);
  border-radius: 3px;
  transition: background 0.2s ease, height 0.2s ease;
}

#chatDragHandle:hover #dragHandleVisual,
#chatDragHandle.dragging #dragHandleVisual {
  background: var(--primary-mid);
  height: 72px;
}

/* Full-screen overlay while dragging (stops canvas/iframe stealing events) */
#dragOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: col-resize;
}

/* ═══════════════════════════════════════════════
   CHAT MESSAGES & INPUT
   ═══════════════════════════════════════════════ */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.cmsg {
  display: flex;
  gap: 7px;
  animation: msgIn .3s ease;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.cmsg.user {
  flex-direction: row-reverse;
}

.cmsg-av {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.cmsg-av.ai {
  background: var(--primary);
  color: #fff;
  font-size: 14px;
}

.cmsg-av.user {
  background: var(--surface2);
  border: 1px solid var(--border);
}

.cmsg-bubble {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}

.cmsg-bubble.ai {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top-left-radius: 3px;
}

.cmsg-bubble.user {
  background: var(--primary-pale);
  border: 1px solid var(--border);
  border-top-right-radius: 3px;
}

/* Typing indicator */
.typing-ind {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-ind span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-lite);
  animation: bounce 1.2s infinite;
}

.typing-ind span:nth-child(2) {
  animation-delay: .2s;
}

.typing-ind span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes bounce {

  0%,
  60%,
  100% {
    transform: translateY(0)
  }

  30% {
    transform: translateY(-6px)
  }
}

/* Suggestion chips */
.suggestions {
  padding: 10px 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sug-chip {
  background: var(--primary-pale);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 10px;
  color: var(--primary);
  cursor: pointer;
  transition: background .15s;
}

.sug-chip:hover {
  background: #d4d4d4;
}

/* Input row */
.chat-input-row {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.chat-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font-b);
  outline: none;
  transition: border-color .15s;
}

.chat-input-row input:focus {
  border-color: var(--primary-mid);
}

.chat-input-row input::placeholder {
  color: var(--muted2);
}

.chat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

.chat-send-btn:hover {
  background: var(--primary-mid);
}

.chat-send-btn svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

/* ═══════════════════════════════════════════════
   CHAT POPOVER (tooltip bubble above FAB)
   ═══════════════════════════════════════════════ */
.chat-popover {
  display: none;
  position: fixed;
  bottom: 95px;
  right: 24px;
  background-color: #ffffff;
  color: #171717;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e5e5;
  cursor: pointer;
  z-index: 9998;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  animation: popoverFadeIn 0.4s ease forwards;
  opacity: 0;
}

.chat-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  transform: rotate(45deg);
}

.popover-close {
  background: none;
  border: none;
  color: #737373;
  font-size: 12px;
  cursor: pointer;
  padding: 2px;
  font-weight: bold;
  transition: color 0.2s ease;
}

.popover-close:hover {
  color: #dc2626;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════
   BIKE COMPONENTS VIEW
   ═══════════════════════════════════════════════ */

/* Tab bar */
.bike-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
}

.bike-tab {
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .18s;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

.bike-tab:hover {
  color: var(--primary);
}

.bike-tab.active {
  color: var(--primary);
  border-bottom-color: var(--danger);
}

.bike-tab-panel {
  display: none;
  animation: fadeTabIn .25s ease;
}

.bike-tab-panel.active {
  display: block;
}

@keyframes fadeTabIn {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Section header */
.inv-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.inv-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary);
  color: #fff;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-m);
}

.inv-section-badge.thorax {
  background: #404040;
}

.inv-section-title {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.inv-section-sub {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* Alert banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 12px;
}

.alert-banner.warn {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.3);
  border-left-color: var(--warn);
}

.alert-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.alert-text {
  color: var(--text);
  line-height: 1.5;
}

.alert-text strong {
  color: var(--danger);
}

.alert-banner.warn .alert-text strong {
  color: var(--warn);
}

.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted2);
  cursor: pointer;
  padding: 2px 4px;
}

.alert-dismiss:hover {
  color: var(--danger);
}

/* Threshold bar */
.threshold-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 12px;
}

.threshold-bar label {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.threshold-bar input[type=number] {
  width: 68px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-family: var(--font-m);
  color: var(--text);
  outline: none;
}

.threshold-bar input[type=number]:focus {
  border-color: var(--primary-mid);
}

.threshold-apply {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-b);
  transition: background .15s;
}

.threshold-apply:hover {
  background: var(--primary-mid);
}

/* Variant grid */
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.variant-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
}

.variant-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.variant-card.critical {
  border-color: rgba(220, 38, 38, 0.4);
}

.variant-card.warning {
  border-color: rgba(217, 119, 6, 0.35);
}

.variant-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
  border-radius: 10px 10px 0 0;
}

.variant-card.critical::before {
  background: var(--danger);
}

.variant-card.warning::before {
  background: var(--warn);
}

.variant-card.ok::before {
  background: var(--primary);
}

.variant-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}

.variant-value {
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.variant-unit {
  font-size: 10px;
  color: var(--muted2);
  margin-left: 3px;
}

.variant-bar-wrap {
  margin-top: 8px;
  height: 4px;
  background: var(--primary-pale);
  border-radius: 2px;
}

.variant-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transition: width .5s ease;
}

.variant-card.critical .variant-bar {
  background: var(--danger);
}

.variant-card.warning .variant-bar {
  background: var(--warn);
}

.variant-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 8px;
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-m);
}

.variant-status.ok {
  background: rgba(23, 23, 23, 0.08);
  color: var(--primary);
}

.variant-status.critical {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.variant-status.warning {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warn);
}

/* Sales filter bar */
.sales-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 12px;
}

.sales-filter-bar label {
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sales-filter-bar input[type=date],
.sales-filter-bar select {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-family: var(--font-b);
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.sales-filter-bar input[type=date]:focus,
.sales-filter-bar select:focus {
  border-color: var(--primary-mid);
}

.filter-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

/* Two-column chart layout */
.bike-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.bike-charts-row.wide {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 900px) {

  .bike-charts-row,
  .bike-charts-row.wide {
    grid-template-columns: 1fr;
  }
}

/* Product table */
.product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.product-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}

.product-table td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
  color: var(--text);
  vertical-align: middle;
}

.product-table td:last-child {
  text-align: right;
}

.product-table tr:last-child td {
  border-bottom: none;
}

.stock-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-m);
}

.stock-pill.ok {
  background: rgba(23, 23, 23, 0.1);
  color: var(--primary);
}

.stock-pill.critical {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
}

.stock-pill.warning {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
}

/* ═══════════════════════════════════════════════
   SIDEBAR — USER CARD + LOGOUT BUTTON
   ═══════════════════════════════════════════════ */
.sidebar-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.60);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-b);
  cursor: pointer;
  transition: all 0.15s ease;
}

.logout-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #ff6b6b;
}

/* ═══════════════════════════════════════════════
   USER MANAGEMENT — TABS
   ═══════════════════════════════════════════════ */
.um-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-b);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: -2px;
}

.um-tab:hover {
  color: var(--primary);
}

.um-tab.um-tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}