:root {
  --active-glow-color: #5dd7ff;
}

/* ===== FIXED BOTTOM BAR AS BACKGROUND ===== */
#bottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1000;
  background: url('../image/bottom/bottomBar.svg') no-repeat center center;
  background-size: cover;
  -webkit-tap-highlight-color: transparent;

  --active-glow-color: #5dd7ff;
}

/* Reserved for future overlays (not used) */
.bottomBarOverlay {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}

/* ===== INLINE SVG ICON CONTROLS ===== */
#bottomBar svg {
  width: 100%;
  height: 100%;
  display: block;
}

#bottomBar g {
  cursor: pointer;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* ===== BASE COLOR STATE ===== */
#bottomBar g path {
  transform: scale(0.65);
  transform-origin: center;
  transition: fill 0.3s ease, transform 0.3s ease;
  fill: #ffffff;
}

/* ===== HOVER: light preview only ===== */
#bottomBar g:hover path {
  fill: #ffffff;
}
#bottomBar g:hover text {
  fill: #ffffff;
}

/* ===== ACTIVE ICON STYLES (glow, centralized color) ===== */
#bottomBar g.active:not(#alert) path {
  fill: var(--active-glow-color);
  filter: drop-shadow(0 0 4px var(--active-glow-color));
  transform: translate(var(--x, 0), -5px) scale(0.65);
}

#bottomBar g.active:not(#alert) text {
  fill: var(--active-glow-color);
  filter: drop-shadow(0 0 2px var(--active-glow-color));
}

/* 🔔 ALERT ICON SELECTED (glow only) */
#bottomBar g#alert.active path {
  fill: var(--active-glow-color);
  filter: drop-shadow(0 0 4px var(--active-glow-color));
  transform: translate(var(--x, 0), -5px) scale(0.65);
}

#bottomBar g#alert.active text {
  fill: var(--active-glow-color);
  filter: drop-shadow(0 0 2px var(--active-glow-color));
}

/* 🔔 ALERT ICON UNREAD STATE = solid yellow */
#bottomBar g#alert.unread path {
  fill: #FFD700;
  filter: none;
}

#bottomBar g#alert.unread text {
  fill: #FFD700;
  filter: none;
}

/* ===== ICON POSITIONING ===== */
#bottomBar g#home    path { --x: -50px; transform: translate(var(--x), -5px) scale(0.65); }
#bottomBar g#sell    path { --x: -25px; transform: translate(var(--x), -5px) scale(0.65); }
#bottomBar g#team    path { --x: 0px;   transform: translate(var(--x), -5px) scale(0.65); }
#bottomBar g#report  path { --x: 25px;  transform: translate(var(--x), -5px) scale(0.65); }
#bottomBar g#alert   path { --x: 50px;  transform: translate(var(--x), -5px) scale(0.65); }

/* ===== LABEL POSITIONING ===== */
#bottomBar g#home    text { transform: translate(4px, 5px); }
#bottomBar g#sell    text { transform: translate(9px, 5px); }
#bottomBar g#team    text { transform: translate(26px, 5px); }
#bottomBar g#report  text { transform: translate(12px, 5px); }
#bottomBar g#alert   text { transform: translate(-4px, 5px); }

#bottomBar g text {
  font-size: 11px;
  font-family: 'Segoe UI', sans-serif;
  pointer-events: none;
  transition: fill 0.3s ease, filter 0.3s ease;
  transform: none; /* Override legacy positioning */
}