/* ===== DESKTOP EXCLUSIVE COMPONENT STYLES ===== */

/* Custom Scrollbar for Unified Sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.6);
}

#desktop-level-selector button.active {
  background: white !important;
  color: #059669 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ===== TIER 4: PREMIUM SLIDING DETAIL PANEL FOR AI ALERTS ===== */
.tier4-detail-panel {
  position: fixed;
  top: 16px;
  left: calc(80px + 320px + 12px); /* Default tablet collapsed left position: 16px margin + 52px collapsed rail + 12px gap + 320px Tier 3 panel + 12px gap */
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  width: 320px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  z-index: 57; /* Placed behind Tier 3 sidebar but on top of map */
  box-shadow:
    0 8px 40px rgba(0, 104, 87, 0.08),
    0 2px 12px rgba(0, 0, 0, 0.07);
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;

  /* Premium slide animation & hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-40px);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tier4-detail-panel.panel-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Positioning based on sidebar rail expanded state (tablet) */
body.rail-expanded .tier4-detail-panel {
  left: calc(232px + 320px + 12px); /* 16px + 204px expanded rail + 12px gap + 320px Tier 3 + 12px gap */
}

/* Desktop sizing and positioning adjustments */
@media (min-width: 1200px) {
  .tier4-detail-panel {
    left: calc(80px + 360px + 12px); /* 16px + 52px + 12px + 360px Tier 3 + 12px gap */
    width: 380px; /* Comfortably wider for detailed reports */
  }
  body.rail-expanded .tier4-detail-panel {
    left: calc(248px + 360px + 12px); /* 16px + 220px expanded rail + 12px gap + 360px Tier 3 + 12px gap */
  }
}

/* Dark Mode support */
.dark .tier4-detail-panel {
  background: rgba(26, 26, 28, 0.88);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 2px 12px rgba(0, 0, 0, 0.30);
}