/**
 * Unified Sidebar Styles
 *
 * A consolidated left sidebar that contains:
 * - Search
 * - Layer toggles
 * - Tools (basemap, download, share)
 * - Layer content (cards, filters, details)
 */

/* ==========================================================================
   CSS Variables for Sidebar
   ========================================================================== */

:root {
  --sidebar-collapsed-width: 52px;
  --sidebar-expanded-width: 360px;
  --sidebar-content-width: 500px;
  --sidebar-details-width: 800px;
  --sidebar-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-bg: hsla(0, 0%, 100%, 0.92);
  --sidebar-bg-solid: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-section-gap: 0.5rem;
  --sidebar-item-height: 40px;
  --sidebar-icon-size: 20px;
  --sidebar-padding: 0.5rem;
}

/* ==========================================================================
   Temp overrides for old elements
   ========================================================================== */

#dashboard-header {
  display: none;
}


/* ==========================================================================
   Main Sidebar Container
   ========================================================================== */

#unified-sidebar {
  width: var(--sidebar-collapsed-width);
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow-m);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: width var(--sidebar-transition);
  pointer-events: all;
  border-right: 2px solid rgba(0, 0, 0, 0.2);
}

#unified-sidebar.expanded {
  width: var(--sidebar-expanded-width);
}

/* View-specific widths */
#unified-sidebar.expanded.view-content {
  width: var(--sidebar-content-width);
}

#unified-sidebar.expanded.view-details {
  width: var(--sidebar-details-width);
}

/* ==========================================================================
   Sidebar Toggle Button (Stripe-style)
   ========================================================================== */

#sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  width: 24px;
  height: 40px;
  background: var(--sidebar-bg-solid);
  border-left: 1px solid var(--sidebar-border);
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

#sidebar-toggle:hover {
  background: var(--color-bg-active);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Chevron icon */
#sidebar-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 150ms ease;
}

/* Hide the bar element (not used) */
#sidebar-toggle .toggle-bar {
  display: none;
}

/* When collapsed, rotate chevron to point right (expand) */
#unified-sidebar:not(.expanded) #sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   Views Container - holds all three views with slide animations
   ========================================================================== */

#sidebar-views-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: var(--sidebar-bg);
  border-radius: 8px;
}

/* Allow tooltips to overflow when collapsed */
#unified-sidebar:not(.expanded) #sidebar-views-container,
#unified-sidebar:not(.expanded) .sidebar-view,
#unified-sidebar:not(.expanded) .sidebar-view.active,
#unified-sidebar:not(.expanded) .sidebar-section,
#unified-sidebar:not(.expanded) #sidebar-layer-list,
#unified-sidebar:not(.expanded) #sidebar-tool-list {
  overflow: visible;
}

/* Ensure views container is above toggle button so tooltips appear on top */
#unified-sidebar:not(.expanded) #sidebar-views-container {
  z-index: 2;
}

/* Individual view panels */
.sidebar-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0ms 200ms;
}

.sidebar-view.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0ms 0ms;
}

/* Instant hide when collapsing - prevents layout shift during width transition */
.sidebar-view.instant-hide {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Allow overflow for search dropdown in layers view */
#sidebar-view-layers.active {
  overflow: visible;
}

/* Allow search dropdown to extend beyond sidebar when expanded */
#unified-sidebar.expanded #sidebar-views-container {
  overflow: visible;
}

#unified-sidebar.expanded #sidebar-search {
  overflow: visible;
}

/* View transitions are handled by opacity/visibility on .sidebar-view */

/* ==========================================================================
   Sidebar Search Section
   ========================================================================== */

#sidebar-search {
  padding: var(--sidebar-padding);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

/* AutocompleteSearchBar container */
#sidebar-searchbar {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* Override AutocompleteSearchBar widget styles for sidebar */
#sidebar-searchbar .autocomplete-searchbar-widget {
  position: relative;
}

#sidebar-searchbar .autocomplete-searchbar-widget-input {
  height: var(--sidebar-item-height);
  padding: 0.5rem 2rem 0.5rem 2.75rem !important;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--sidebar-bg-solid);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#sidebar-searchbar .autocomplete-searchbar-widget-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 2px rgba(24, 35, 66, 0.1);
  outline: none;
}

#sidebar-searchbar .autocomplete-searchbar-widget-input::placeholder {
  color: #999;
}

/* Search icon - use .fa.fa-search to match Font Awesome icon */
#sidebar-searchbar .fa.fa-search {
  width: 2rem;
  height: var(--sidebar-item-height);
  line-height: var(--sidebar-item-height) !important;
  color: #666;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Clear button */
#sidebar-searchbar .input-icon.clear-btn {
  width: 2rem;
  height: var(--sidebar-item-height);
  line-height: var(--sidebar-item-height) !important;
  color: #999;
  font-size: 0.75rem;
}

#sidebar-searchbar .input-icon.clear-btn:hover {
  color: #333;
}

/* Autocomplete dropdown - position below input, allow overflow beyond sidebar */
#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 340px !important;
  margin-top: 4px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
}

#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-inner-wrapper {
  max-height: 320px;
  overflow-y: auto;
  background: var(--sidebar-bg-solid);
}

#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item:last-child {
  border-bottom: none;
}

#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item:hover,
#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item.active {
  background: rgba(0, 0, 0, 0.04);
}

#sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item-type-tag {
  font-size: 0.625rem;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  background: var(--color-blue-dk);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  flex-shrink: 0;
}

/* Category grouped search results */
#sidebar-searchbar .autocomplete-searchbar-widget-category-group {
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-searchbar .autocomplete-searchbar-widget-category-group:last-child {
  border-bottom: none;
}

#sidebar-searchbar .autocomplete-searchbar-widget-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1;
}

#sidebar-searchbar .autocomplete-searchbar-widget-category-header sl-icon {
  font-size: 0.875rem;
  color: var(--color-blue-dk, #182342);
}

#sidebar-searchbar .autocomplete-searchbar-widget-grouped-item {
  padding: 0.625rem 0.875rem 0.625rem 1.125rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

#sidebar-searchbar .autocomplete-searchbar-widget-grouped-item:last-child {
  border-bottom: none;
}

#sidebar-searchbar .autocomplete-searchbar-widget-grouped-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* When collapsed, hide the search input and show just an icon */
#unified-sidebar:not(.expanded) #sidebar-search {
  overflow: visible;
}

#unified-sidebar:not(.expanded) #sidebar-searchbar {
  width: calc(var(--sidebar-collapsed-width) - 2 * var(--sidebar-padding));
  overflow: hidden;
}

#unified-sidebar:not(.expanded) #sidebar-searchbar .autocomplete-searchbar-widget {
  width: 100%;
  overflow: hidden;
}

#unified-sidebar:not(.expanded) #sidebar-searchbar .autocomplete-searchbar-widget-input {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-indent: -9999px;
  cursor: pointer;
  background: transparent;
}

#unified-sidebar:not(.expanded) #sidebar-searchbar .fa.fa-search {
  width: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}

#unified-sidebar:not(.expanded) #sidebar-searchbar .input-icon.clear-btn {
  display: none !important;
}

/* Hide autocomplete dropdown when collapsed */
#unified-sidebar:not(.expanded) #sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-wrapper {
  display: none !important;
}

/* ==========================================================================
   Sidebar Sections
   ========================================================================== */

.sidebar-section {
  padding: var(--sidebar-padding);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-section-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  opacity: 0;
  transition: opacity 200ms ease;
  white-space: nowrap;
  width: 100%;
}

#unified-sidebar.expanded .sidebar-section-header {
  opacity: 1;
}

/* ==========================================================================
   Layer List
   ========================================================================== */

#sidebar-layers {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for flex scrolling */
  overflow: hidden; /* Prevent parent from overflowing */
}

#sidebar-layer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Critical for flex scrolling */
}

/* #unified-sidebar.collapsed #sidebar-layers,
#unified-sidebar.collapsed #sidebar-layer-list {
  overflow: hidden;
} */

#unified-sidebar.expanded #sidebar-layers {
  align-items: stretch;
}

.sidebar-layer-item {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: var(--sidebar-item-height);
  margin: 2px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  position: relative;
  box-sizing: border-box;
}

.sidebar-layer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sidebar-item-height);
  width: 100%;
}

/* When expanded, align items to the left and use full width */
#unified-sidebar.expanded .sidebar-layer-item {
  width: 100%;
}

#unified-sidebar.expanded .sidebar-layer-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

#unified-sidebar:not(.expanded) .sidebar-layer-item:hover .sidebar-layer-icon {
  background: rgba(0, 0, 0, 0.04);
}



.sidebar-layer-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background-color 150ms ease;
  position: relative;
}

.sidebar-layer-icon svg {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  fill: var(--color-blue-dk);
  transition: fill 150ms ease;
}

.sidebar-layer-icon svg path,
.sidebar-layer-icon svg rect,
.sidebar-layer-icon svg circle,
.sidebar-layer-icon svg polyline {
  fill: var(--color-blue-dk);
  transition: fill 150ms ease;
}

.sidebar-layer-icon svg polyline {
  stroke: var(--color-blue-dk);
  transition: stroke 150ms ease;
}

.sidebar-layer-icon img {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  object-fit: contain;
}

.sidebar-layer-label {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
  padding-left: 0.5rem;
}

#unified-sidebar.expanded .sidebar-layer-label {
  opacity: 1;
}

.sidebar-layer-toggle {
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}

#unified-sidebar.expanded .sidebar-layer-toggle {
  opacity: 1;
}

/* Custom checkbox styling */
.sidebar-layer-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: all 150ms ease;
}

.sidebar-layer-toggle input[type="checkbox"]:hover {
  border-color: var(--color-blue);
}

.sidebar-layer-toggle input[type="checkbox"]:checked {
  background: var(--color-blue);
  border-color: var(--color-blue);
}

.sidebar-layer-toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sidebar-layer-toggle input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 145, 175, 0.2);
}

/* Layer visibility indicator dot */
.sidebar-layer-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 0px;
  width: 8px;
  height: 8px;
  background: var(--color-blue);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 150ms ease, transform 150ms ease;
}

.sidebar-layer-item.visible .sidebar-layer-icon::after {
  opacity: 1;
  transform: scale(1);
}

/* Lock icon for premium layers */
.sidebar-layer-lock {
  width: 16px;
  height: 16px;
  margin-left: 0.25rem;
  color: #999;
  opacity: 0;
  transition: opacity 200ms ease;
}

#unified-sidebar.expanded .sidebar-layer-lock {
  opacity: 1;
}

/* ==========================================================================
   Layer Symbology (Dropdown Legend)
   ========================================================================== */

/* Toggle button on main row */
.layer-symbology-toggle {
  display: none; /* Hidden when sidebar collapsed */
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem; /* Increased padding for larger hit area */
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
  margin: -0.25rem 0; /* Negative margin to maintain visual spacing */
}

#unified-sidebar.expanded .layer-symbology-toggle {
  display: flex;
}

.layer-symbology-toggle:hover {
  color: rgba(0, 0, 0, 0.6);
}

.symbology-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.sidebar-layer-item.symbology-expanded .symbology-chevron {
  transform: rotate(90deg);
}

/* Expandable symbology content - using CSS Grid trick for smooth height transitions */
.layer-symbology {
  display: grid;
  grid-template-rows: 0fr; /* Collapsed state */
  transition: grid-template-rows 300ms ease, padding 300ms ease;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

#unified-sidebar.expanded .sidebar-layer-item.symbology-expanded .layer-symbology {
  grid-template-rows: 1fr; /* Expanded state - uses actual content height */
  padding: 0.5rem 0.5rem 0.5rem 1rem; /* Add padding when expanded */
}

/* Inner wrapper for grid content */
.layer-symbology > div {
  min-height: 0; /* Required for grid trick to work */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.symbology-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.symbology-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.symbology-label {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3;
}

/* Icon type styles */

/* Projects - polygon and point (match exact colors from layer) */
.symbology-polygon {
  border-radius: 2px;
  background-color: #00000040 !important; /* rgba(0,0,0,0.25) */
  border: 1px solid #00000080 !important;  /* rgba(0,0,0,0.5) */
}

.symbology-point {
  border-radius: 50%;
  background-color: #000000BF !important; /* rgba(0,0,0,0.75) */
  border: 1px solid #000000 !important;
}

/* Claims - various states with colors passed via inline style */
.symbology-claims-new-30,
.symbology-claims-new-7,
.symbology-claims-expire-24h,
.symbology-claims-expire-7d,
.symbology-claims-expire-30d {
  border-radius: 2px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: inherit !important;
}

.symbology-claims-default {
  border-radius: 2px;
  background-color: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.4) !important;
}

/* Drilling - donut/circle to represent donut charts */
.symbology-drill-result,
.symbology-drill-collar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(
    #FFD700 0deg 90deg,    /* gold */
    #C0C0C0 90deg 180deg,  /* silver */
    #B87333 180deg 270deg, /* copper */
    #6C6C6A 270deg 360deg  /* iron */
  ) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* JV Options - red pin SVG container */
.symbology-jv-marker {
  width: 14px;
  height: 20px;
  border: none !important;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.symbology-jv-marker svg {
  width: 100%;
  height: 100%;
}

/* Mineral Occurrences - match exact colors and shapes from layer */
.symbology-mineral-prospect {
  border-radius: 50%;
  background-color: #4ef133 !important; /* bright green */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.symbology-mineral-placer {
  border-radius: 50%;
  background-color: #b603fc !important; /* purple */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.symbology-mineral-developed {
  width: 14px;
  height: 14px;
  background-color: #fff100 !important; /* yellow */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.symbology-mineral-past-producer {
  background-color: #d37003 !important; /* orange */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  transform: rotate(45deg);
}

.symbology-mineral-producer {
  position: relative;
  background-color: #333333 !important; /* dark gray */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.symbology-mineral-producer::before,
.symbology-mineral-producer::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.symbology-mineral-producer::after {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.symbology-mineral-unknown {
  position: relative;
  border-radius: 50%;
  background-color: #808080 !important; /* gray */
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.symbology-mineral-unknown::after {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: bold;
  color: white;
  line-height: 1;
}

/* Articles - SVG map pin container */
.symbology-article-marker {
  width: 16px;
  height: 21px;
  border: none !important;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbology-article-marker svg {
  width: 100%;
  height: 100%;
}

/* Movers - vertical bars */
.symbology-mover-positive,
.symbology-mover-negative {
  width: 6px;
  height: 12px;
  border-radius: 1px;
  border: none !important;
}

.symbology-mover-positive {
  background-color: #22c55e !important; /* green */
}

.symbology-mover-negative {
  background-color: #ef4444 !important; /* red */
}

/* News - image icon container */
.symbology-news-icon {
  width: 14px;
  height: 20px;
  border: none !important;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbology-news-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* News dual - SVG with gradient */
.symbology-news-dual {
  width: 14px;
  height: 20px;
  border: none !important;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.symbology-news-dual svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Tools Section
   ========================================================================== */

#sidebar-tools {
  flex-shrink: 0;
  padding: var(--sidebar-padding);
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
}

/* ==========================================================================
   Sponsor Widget
   ========================================================================== */

.sidebar-sponsor-widget {
  flex-shrink: 0;
  padding: 0.5rem var(--sidebar-padding);
  border-top: 1px solid var(--sidebar-border);
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}

.sidebar-sponsor-widget:empty {
  display: none;
}

/* Hide when sidebar is collapsed */
#unified-sidebar:not(.expanded) .sidebar-sponsor-widget {
  display: none;
}

/* Style the carousel inside */
.sidebar-sponsor-widget .company-logos-carousal-wrapper {
  width: 100%;
  height: 50px;
  position: relative;
}

.sidebar-sponsor-widget .logo-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-sponsor-widget .logo-slide:first-child {
  position: relative !important;
}

.sidebar-sponsor-widget .company-logos-carousal-wrapper img {
  max-width: 120px !important;
  max-height: 50px !important;
  object-fit: contain;
}

/* Hide loader styling conflicts */
.sidebar-sponsor-widget #company-logos-carousal-loader-wrapper {
  min-height: 50px;
}

.sidebar-sponsor-widget #company-logos-carousal-loader-wrapper .loader {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-top-color: #0091af;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#sidebar-tool-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

#unified-sidebar.expanded #sidebar-tool-list {
  align-items: stretch;
}

/* Tool items - match layer items exactly */
.sidebar-tool-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--sidebar-item-height);
  margin: 2px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  position: relative;
  box-sizing: border-box;
}

#unified-sidebar.expanded .sidebar-tool-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

#unified-sidebar:not(.expanded) .sidebar-tool-item:hover .sidebar-tool-icon {
  background: rgba(0, 0, 0, 0.04);
}



.sidebar-tool-item.active {
  background: rgba(0, 0, 0, 0.08);
}

.sidebar-tool-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background-color 150ms ease;
}

.sidebar-tool-icon svg {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  fill: var(--color-blue-dk);
  transition: fill 150ms ease;
}

.sidebar-tool-icon svg path,
.sidebar-tool-icon svg rect,
.sidebar-tool-icon svg circle,
.sidebar-tool-icon svg polyline {
  fill: var(--color-blue-dk);
  transition: fill 150ms ease;
}

.sidebar-tool-label {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
  padding-left: 0.5rem;
}

#unified-sidebar.expanded .sidebar-tool-label {
  opacity: 1;
}

/* Locked tool state (e.g., download when not permitted) */
.sidebar-tool-item.locked {
  cursor: pointer;
}

/* Fade out the icon and label, but not the tooltip */
.sidebar-tool-item.locked .sidebar-tool-icon,
.sidebar-tool-item.locked .sidebar-tool-label,
.sidebar-tool-item.locked .sidebar-tool-lock {
  opacity: 0.5;
}

/* Hide label and lock icon when collapsed */
#unified-sidebar:not(.expanded) .sidebar-tool-item.locked .sidebar-tool-label,
#unified-sidebar:not(.expanded) .sidebar-tool-item.locked .sidebar-tool-lock {
  display: none;
}

.sidebar-tool-item.locked:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-tool-lock {
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
}

.sidebar-tool-lock svg {
  width: 12px;
  height: 12px;
  fill: #888;
}

/* When expanded: tooltip positioned above */
#unified-sidebar.expanded .sidebar-tool-item.locked .sidebar-tooltip {
  top: auto;
  bottom: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(4px);
  margin-bottom: 8px;
}

/* Arrow at bottom when tooltip is above */
#unified-sidebar.expanded .sidebar-tool-item.locked .sidebar-tooltip::before {
  left: 50%;
  top: auto;
  bottom: -8px;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-blue-dk);
  border-right-color: transparent;
}

#unified-sidebar.expanded .sidebar-tool-item.locked:hover .sidebar-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* When collapsed: tooltip positioned to the right (like other tooltips) */
#unified-sidebar:not(.expanded) .sidebar-tool-item.locked .sidebar-tooltip {
  top: 50%;
  bottom: auto;
  left: calc(100% + 12px);
  right: auto;
  transform: translateY(-50%) translateX(-4px);
  margin-bottom: 0;
}

/* Arrow on left when tooltip is to the right */
#unified-sidebar:not(.expanded) .sidebar-tool-item.locked .sidebar-tooltip::before {
  left: -8px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--color-blue-dk);
  border-top-color: transparent;
}

#unified-sidebar:not(.expanded) .sidebar-tool-item.locked:hover .sidebar-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Content Panel (appears when layer selected)
   ========================================================================== */

/* Content view is now handled by .sidebar-view.active */
#sidebar-view-content {
  background: var(--sidebar-bg-solid);
}

#sidebar-content-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 0.5rem;
  min-height: 52px;
  box-sizing: border-box;
}

/* Breadcrumb navigation */
#sidebar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

#sidebar-breadcrumb-back {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  color: var(--color-blue);
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(0, 145, 175, 0.08);
  border: 1px solid rgba(0, 145, 175, 0.15);
}

#sidebar-breadcrumb-back:hover {
  background: rgba(0, 145, 175, 0.15);
  color: var(--color-blue);
  border-color: rgba(0, 145, 175, 0.25);
  transform: translateX(-2px);
}

#sidebar-breadcrumb-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.sidebar-breadcrumb-separator {
  color: var(--sidebar-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

#sidebar-content-title {
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-content-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

#sidebar-content-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Content search and filters - sticky within scroll wrapper */
#sidebar-content-filters {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-solid);
  position: sticky;
  top: 0;
  z-index: 5;
}

#sidebar-content-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

#sidebar-content-search-wrapper .search-icon {
  position: absolute;
  left: 0.625rem;
  width: 14px;
  height: 14px;
  color: #9ca3af;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar-content-search-wrapper .search-icon svg {
  width: 100%;
  height: 100%;
}

#sidebar-content-search {
  flex: 1;
  width: 100%;
  height: 36px;
  padding: 0 0.75rem 0 2rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms ease;
}

#sidebar-content-search:focus {
  border-color: var(--color-blue);
}

#sidebar-content-search:focus + .search-icon,
#sidebar-content-search-wrapper:focus-within .search-icon {
  color: var(--color-blue);
}

#sidebar-content-filter-btn,
#sidebar-content-clear-btn {
  height: 36px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease;
  gap: 0.375rem;
}

#sidebar-content-filter-btn {
  background: var(--sidebar-bg-solid);
  border: 1px solid var(--sidebar-border);
}

#sidebar-content-filter-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

#sidebar-content-filter-btn > svg {
  width: 12px;
}

#sidebar-content-clear-btn {
  background: transparent;
  border: none;
  color: var(--color-blue);
}

#sidebar-content-clear-btn:hover {
  background: rgba(0, 145, 175, 0.08);
}

/* Active filters */
#sidebar-content-active-filters {
  display: none;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-content-active-filters.has-filters {
  display: flex;
}

/* Scrollable content wrapper - contains ads, filters, and cards */
#sidebar-content-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
}

/* Content list area - no longer needs its own scroll */
#sidebar-content-list {
  padding: 0.5rem;
}

/* Loading state */
#sidebar-content-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #666;
}

#sidebar-content-loading.visible {
  display: flex;
}

#sidebar-content-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sidebar-border);
  border-top-color: var(--color-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* No results state */
#sidebar-content-list .no-results-wrapper {
  pointer-events: none;
}

#sidebar-content-list .no-results-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--sidebar-bg-solid);
  border: 1px dashed var(--sidebar-border);
  border-radius: 12px;
  color: #64748b;
  min-height: 180px;
  gap: 1rem;
}

#sidebar-content-list .no-results-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #f1f5f9;
  border-radius: 50%;
  color: #94a3b8;
}

#sidebar-content-list .no-results-icon svg {
  width: 32px;
  height: 32px;
}

#sidebar-content-list .no-results-copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

#sidebar-content-list .no-results-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #475569;
}

#sidebar-content-list .no-results-description {
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ==========================================================================
   Filter Panel (slides in from right of sidebar)
   ========================================================================== */

#sidebar-filter-panel {
  position: absolute;
  top: 0;
  left: 100%;
  width: 320px;
  height: 100%;
  background: var(--sidebar-bg-solid);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--box-shadow-m);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--sidebar-transition), opacity var(--sidebar-transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-filter-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

#sidebar-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-filter-title {
  font-size: 1rem;
  font-weight: 600;
}

#sidebar-filter-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

#sidebar-filter-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

#sidebar-filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* ==========================================================================
   Tooltips for collapsed state
   ========================================================================== */

.sidebar-tooltip {
  position: absolute;
  left: calc(var(--sidebar-collapsed-width));
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--color-blue-dk);
  color: white;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 100;
}

.sidebar-tooltip::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--color-blue-dk);
}

#unified-sidebar:not(.expanded) .sidebar-layer-item:hover .sidebar-tooltip,
#unified-sidebar:not(.expanded) .sidebar-tool-item:hover .sidebar-tooltip,
#unified-sidebar:not(.expanded) .sidebar-help-item:hover .sidebar-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

#unified-sidebar:not(.expanded) .sidebar-layer-item {
  pointer-events: none;
}

#unified-sidebar:not(.expanded) .sidebar-layer-item .sidebar-layer-icon {
  pointer-events: all;
}

/* Search tooltip positioning */
#sidebar-search {
  position: relative;
}

#sidebar-search-tooltip {
  left: calc(var(--sidebar-collapsed-width) + 8px);
}

#unified-sidebar:not(.expanded) #sidebar-search:hover #sidebar-search-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Toggle button tooltip positioning - appears to the right of the button */
#sidebar-toggle-tooltip {
  left: calc(100% + 8px);
  right: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

#sidebar-toggle:hover #sidebar-toggle-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Details Panel (for feature details)
   ========================================================================== */

/* Details view is now handled by .sidebar-view.active */
#sidebar-view-details {
  background: var(--sidebar-bg-solid);
}

#sidebar-details-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 0.5rem;
  background: var(--sidebar-bg-solid);
  min-height: 52px;
  box-sizing: border-box;
}

#sidebar-details-back {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

#sidebar-details-back:hover {
  background: rgba(0, 0, 0, 0.06);
}

#sidebar-details-back svg {
  width: 18px;
  height: 18px;
}

#sidebar-edit-project-btn {
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-primary, #182342);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
  flex-shrink: 0;
}

#sidebar-edit-project-btn:hover {
  opacity: 0.9;
}

#sidebar-edit-project-btn svg {
  width: 12px;
  height: 12px;
}

#sidebar-details-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#sidebar-details-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

#sidebar-details-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

#sidebar-details-close svg {
  width: 16px;
  height: 16px;
}

/* Details loading state */
#sidebar-details-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

#sidebar-details-loading.visible {
  display: flex;
}

#sidebar-details-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--sidebar-border);
  border-top-color: var(--color-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Scrollable details wrapper - contains ads and content */
#sidebar-details-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
}

/* Details content area - no longer needs its own scroll */
#sidebar-details-content {
  padding: 0;
}

/* Scrollable filters wrapper */
#sidebar-filters-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
}

/* Scrollable help wrapper */
#sidebar-help-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
}

/* Scrollable download wrapper */
#sidebar-download-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
}

/* Scrollable layers wrapper - for desktop, no special styling needed */
#sidebar-layers-scroll-wrapper {
  display: contents; /* Pass through flex layout on desktop */
}

/* ==========================================================================
   Details Panel Tabs - Modern pill-style tabs
   ========================================================================== */

#sidebar-details-content .tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(to bottom, #f8fafc, var(--sidebar-bg-solid));
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

#sidebar-details-content .tabs-wrapper .tabs-loader-wrapper {
  display: none;
}

#sidebar-details-content .tabs-wrapper .tab {
  padding: 0.5rem 1rem;
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
  background: white;
  color: #64748b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar-details-content .tabs-wrapper .tab:hover {
  background: white;
  color: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

#sidebar-details-content .tabs-wrapper .tab.active {
  background: var(--color-blue);
  color: white;
  border-color: var(--color-blue);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 145, 175, 0.3);
}

#sidebar-details-content .tabs-wrapper .tab.active:hover {
  background: var(--color-blue-dk);
  border-color: var(--color-blue-dk);
  transform: none;
}

#sidebar-details-content .tabs-wrapper .tab.disabled {
  display: none !important;
}

#sidebar-details-content .tabs-wrapper .tab.show {
  display: flex !important;
}

/* ==========================================================================
   Details Panel Tab Content
   ========================================================================== */

#sidebar-details-content .all-tabs-content-wrapper {
  background: var(--sidebar-bg-solid);
  min-height: 200px;
}

#sidebar-details-content .tab-content-wrapper {
  display: none;
  padding: 0.75rem;
}

#sidebar-details-content .tab-content-wrapper.active {
  display: block;
}

/* ==========================================================================
   Panel Body & Sections
   ========================================================================== */

#sidebar-details-content .panel-body {
  background: transparent;
}

#sidebar-details-content .panel-body img {
  max-width: 100%;
  height: auto;
}

#sidebar-details-content .panel-section {
  margin: 0.75rem 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-details-content .panel-section:last-of-type {
  border-bottom: none;
}

#sidebar-details-content .panel-subsection {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

#sidebar-details-content .subsection-header {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.75rem;
  background: var(--color-blue-dk);
  color: white;
  border-radius: 4px;
  margin: 0 0 0.75rem 0;
}

#sidebar-details-content .panel-section-header {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

/* Panel Title - Large section heading (e.g., "Reports", "Drilling") */
#sidebar-details-content .panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-blue-dk);
  margin: 0 0 1.25rem 0;
  line-height: 1.2;
}

/* ==========================================================================
   Social Links Section (bottom of panel)
   ========================================================================== */

#sidebar-details-content .panel-socials-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sl-color-neutral-200);
}

#sidebar-details-content .socials-section .subsection-header {
  margin-bottom: 0.75rem;
}

#sidebar-details-content .socials-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#sidebar-details-content .social-link-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--sl-color-neutral-100);
  border-radius: 6px;
  text-decoration: none;
  color: var(--sl-color-neutral-700);
  font-size: 13px;
  transition: background 150ms ease, color 150ms ease;
}

#sidebar-details-content .social-link-item:hover {
  background: var(--sl-color-neutral-200);
  color: var(--sl-color-neutral-900);
}

#sidebar-details-content .social-link-item .social-icon {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

#sidebar-details-content .social-link-item:hover .social-icon {
  opacity: 1;
}

#sidebar-details-content .social-link-item .social-label {
  font-weight: 500;
}

/* ==========================================================================
   Project Details Table
   ========================================================================== */

#sidebar-details-content .panel-project-basic-details-section {
  margin-bottom: 1rem;
}

#sidebar-details-content .project-basic-details-row {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#sidebar-details-content .project-basic-details-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.02);
}

#sidebar-details-content .project-basic-details-row:last-child {
  border-bottom: none;
}

#sidebar-details-content .project-basic-details-cell {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

#sidebar-details-content .project-basic-details-cell.header-cell {
  width: 35%;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

#sidebar-details-content .project-basic-details-cell:not(.header-cell) {
  width: 65%;
  color: #333;
}

/* ==========================================================================
   Company Projects List Table
   ========================================================================== */

#sidebar-details-content .panel-company-projects-list-section {
  margin-top: 1rem;
}

/* ==========================================================================
   Company Projects List - Card Layout
   ========================================================================== */

#sidebar-details-content .company-projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#sidebar-details-content .company-projects-empty {
  padding: 1rem;
  text-align: center;
  color: #666;
  font-size: 0.875rem;
}

#sidebar-details-content .company-project-card {
  background: var(--sidebar-bg-solid);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
}

#sidebar-details-content .company-project-card:hover {
  border-color: var(--color-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#sidebar-details-content .company-project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#sidebar-details-content .company-project-card-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sidebar-text);
  line-height: 1.3;
}

#sidebar-details-content .company-project-card-title .flagship-icon {
  flex-shrink: 0;
  color: #f59e0b;
}

#sidebar-details-content .company-project-card-title .flagship-icon .inline-svg-icon {
  width: 12px;
  height: 12px;
}

#sidebar-details-content .company-project-card-title .project-name {
  word-break: break-word;
}

#sidebar-details-content .stage-badge {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

#sidebar-details-content .company-project-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

#sidebar-details-content .company-project-card-badges:empty {
  display: none;
}

/* ==========================================================================
   Relationship Badges
   ========================================================================== */

#sidebar-details-content .relationship-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.08);
  color: #555;
}

#sidebar-details-content .relationship-badge.owner,
#sidebar-details-content .relationship-badge.operator,
#sidebar-details-content .relationship-badge.owner-operator {
  background: rgba(0, 145, 175, 0.12);
  color: #0091af;
}

#sidebar-details-content .relationship-badge.jv {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

#sidebar-details-content .relationship-badge.optioned-to {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

#sidebar-details-content .relationship-badge.optioned-from {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

#sidebar-details-content .relationship-badge.nsr {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* ==========================================================================
   Project Card Details
   ========================================================================== */

#sidebar-details-content .company-project-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#sidebar-details-content .company-project-card-details:empty {
  display: none;
}

#sidebar-details-content .company-project-card-details .detail-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
}

#sidebar-details-content .company-project-card-details .detail-label {
  color: #888;
  flex-shrink: 0;
  min-width: 5.5rem;
}

#sidebar-details-content .company-project-card-details .detail-value {
  color: var(--sidebar-text);
}

/* ==========================================================================
   News/Articles Cards in Details
   ========================================================================== */

#sidebar-details-content .panel-newsroom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#sidebar-details-content .sources-list-item-wrapper {
  background: var(--sidebar-bg-solid);
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}

#sidebar-details-content .sources-list-item-wrapper:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

#sidebar-details-content .sources-list-item-wrapper.currently-viewing {
  border-color: var(--color-blue);
  background: rgba(0, 145, 175, 0.05);
}

#sidebar-details-content .sources-list-item-inner {
  padding: 0.75rem;
}

#sidebar-details-content .news-card-tags-and-date-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#sidebar-details-content .card-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

#sidebar-details-content .card-tags-wrapper .tag {
  padding: 0.125rem 0.375rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
}

#sidebar-details-content .news-card-date-wrapper {
  font-size: 0.6875rem;
  color: #666;
}

#sidebar-details-content .card-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  line-height: 1.3;
}

#sidebar-details-content .news-card-description {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.4;
}

/* ==========================================================================
   Stocks Section
   ========================================================================== */

#sidebar-details-content .panel-stocks-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#sidebar-details-content .qm-stock-chart-wrapper {
  flex: 1;
  min-width: 250px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  overflow: hidden;
}

/* ==========================================================================
   Reports Section - Modern card-based design
   ========================================================================== */

#sidebar-details-content .reports-wrapper {
  margin-bottom: 1.5rem;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--sidebar-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

#sidebar-details-content .reports-section-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--sidebar-border);
  color: #475569;
  margin: 0;
}

#sidebar-details-content .company-reports-wrapper,
#sidebar-details-content .project-reports-wrapper {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#sidebar-details-content .report-item {
  display: inline-flex;
  padding: 0;
  border-bottom: none;
  flex: 0 0 auto;
  max-width: 100%;
}

#sidebar-details-content .report-item:last-child {
  border-bottom: none;
}

#sidebar-details-content .report-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: #334155;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 150ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#sidebar-details-content .report-item a:hover {
  text-decoration: none;
  background: white;
  border-color: var(--color-blue);
  color: var(--color-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

#sidebar-details-content .report-item a:hover img {
  filter: none;
  opacity: 0.8;
}

#sidebar-details-content .report-item a .card-title {
  margin: 0 !important;
  font-size: 0.8125rem;
  line-height: 1.3;
}

#sidebar-details-content .report-item a img {
  opacity: 0.5;
  transition: all 150ms ease;
  flex-shrink: 0;
}

#sidebar-details-content .report-item a:hover img {
  opacity: 1;
}

/* ==========================================================================
   Management Table
   ========================================================================== */

#sidebar-details-content .management-table {
  width: 100%;
  border-collapse: collapse;
}

#sidebar-details-content .management-table th,
#sidebar-details-content .management-table td {
  padding: 0.5rem;
  text-align: left;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-details-content .management-table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: #666;
}

/* ==========================================================================
   General Tables
   ========================================================================== */

#sidebar-details-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

#sidebar-details-content table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

#sidebar-details-content table td:first-child {
  font-weight: 500;
  color: #666;
  width: 35%;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

#sidebar-details-content .table-view-details-btn {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.25rem;
  background: transparent;
  color: var(--color-blue);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-blue);
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  margin-left: 0.5rem;
}

#sidebar-details-content .table-view-details-btn img {
  filter: none !important;
  opacity: 0.7;
  transition: opacity 150ms ease, filter 150ms ease;
}

#sidebar-details-content .table-view-details-btn:hover {
  background: var(--color-blue);
  color: white;
}

#sidebar-details-content .table-view-details-btn:hover img {
  filter: invert(1) !important;
  opacity: 1;
}

#sidebar-details-content .details-load-more-button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}

#sidebar-details-content .details-load-more-button:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Loader
   ========================================================================== */

#sidebar-details-content .loader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

#sidebar-details-content .adv-loader {
  width: 32px;
  height: 32px;
}

/* Secondary layers wrapper - contain the loader properly */
#sidebar-details-content #secondary-layers-wrapper {
  position: relative;
  min-height: 0;
}

#sidebar-details-content #secondary-layers-wrapper > .loader-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 1rem;
  z-index: 1;
  min-height: 60px;
}

/* ==========================================================================
   No Content State
   ========================================================================== */

#sidebar-details-content .tab-content-no-data {
  padding: 2rem;
  text-align: center;
  color: #666;
  font-size: 0.875rem;
}

/* ==========================================================================
   Vrify Embed
   ========================================================================== */

#sidebar-details-content #vrify-wrapper {
  margin: 1rem 0;
}

#sidebar-details-content #vrify-iframe {
  border-radius: 6px;
  border: 1px solid var(--sidebar-border);
}

/* ==========================================================================
   Download Panel
   ========================================================================== */

#sidebar-view-download {
  background: var(--sidebar-bg-solid);
}

#sidebar-download-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 0.5rem;
  background: var(--sidebar-bg-solid);
}

#sidebar-download-back {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

#sidebar-download-back:hover {
  background: rgba(0, 0, 0, 0.06);
}

#sidebar-download-back svg {
  width: 18px;
  height: 18px;
}

#sidebar-download-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
}

#sidebar-download-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

#sidebar-download-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

#sidebar-download-close svg {
  width: 16px;
  height: 16px;
}

#sidebar-download-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* Style overrides for download content mirrored from download panel */
#sidebar-download-content .sources-panel {
  padding: 0;
}

/* Intro text */
#sidebar-download-content .sources-panel > div:first-child {
  padding: 0.75rem 1rem !important;
  font-size: 0.8125rem !important;
  color: #666;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0;
}

#sidebar-download-content .sources-panel > div:first-child p {
  margin: 0;
}

/* Accordion items */
#sidebar-download-content details {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-download-content details:last-of-type {
  border-bottom: none;
}

#sidebar-download-content details summary {
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  background: transparent;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 150ms ease;
}

#sidebar-download-content details summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

#sidebar-download-content details summary::-webkit-details-marker {
  display: none;
}

/* Summary inner content - icon and label */
#sidebar-download-content details summary > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Fixed-width icon for alignment - use min-width to ensure consistent spacing */
#sidebar-download-content details summary svg,
#sidebar-download-content details summary .inline-svg-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  fill: var(--color-blue-dk);
  /* Reset any inline margins that might cause misalignment */
  margin: 0 !important;
}

/* Add chevron indicator */
#sidebar-download-content details summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(-45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: auto;
}

#sidebar-download-content details[open] summary::after {
  transform: rotate(45deg);
}

#sidebar-download-content details[open] summary {
  border-bottom: 1px solid var(--sidebar-border);
  background: rgba(0, 0, 0, 0.02);
}

/* Content area */
#sidebar-download-content .download-layer-content {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.01);
}

#sidebar-download-content .download-layer-count-wrapper {
  font-size: 0.8125rem;
  color: #666;
  margin-bottom: 0.75rem;
}

#sidebar-download-content .download-layer-count-wrapper img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.6;
}

#sidebar-download-content .download-layer-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#sidebar-download-content .download-layer-buttons-wrapper button {
  min-width: 80px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  background: var(--sidebar-bg-solid);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

#sidebar-download-content .download-layer-buttons-wrapper button:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-blue);
}

#sidebar-download-content .download-layer-buttons-wrapper button img {
  width: 16px;
  height: 16px;
}

#sidebar-download-content .download-layer-buttons-wrapper .download-button-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Download button loading state */
#sidebar-download-content .download-layer-buttons-wrapper button.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

#sidebar-download-content .download-layer-buttons-wrapper button.loading .download-button-img-wrapper,
#sidebar-download-content .download-layer-buttons-wrapper button.loading > span:not(.button-loader-wrapper) {
  opacity: 0.3;
}

#sidebar-download-content .download-layer-buttons-wrapper button .button-loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1400px) {
  :root {
    --sidebar-details-width: 600px;
  }
}

@media (max-width: 1200px) {
  :root {
    --sidebar-content-width: 420px;
    --sidebar-details-width: 500px;
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-expanded-width: 320px;
    --sidebar-content-width: 380px;
    --sidebar-details-width: 380px;
  }
}

/* ==========================================================================
   Hide old UI elements when UnifiedSidebar is active (mobile only)

   These elements only exist in the mobile HTML (advanced-map-mobile.html)
   and are hidden when UnifiedSidebar is active:

   - #sources-tab-btns - Old layer toggle buttons on right side
   - #help-btn, #help-btn-menu - Old help button and menu
   ========================================================================== */

body.unified-sidebar-active #sources-tab-btns,
body.unified-sidebar-active #help-btn,
body.unified-sidebar-active #help-btn-menu {
  display: none !important;
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

#unified-sidebar ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#unified-sidebar ::-webkit-scrollbar-track {
  background: transparent;
}

#unified-sidebar ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

#unified-sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Card Styling within Sidebar Content
   ========================================================================== */

#sidebar-content-list .sources-list-item-wrapper {
  margin-bottom: 0.5rem;
  border-radius: 6px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

#sidebar-content-list .sources-list-item-wrapper:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Empty state */
#sidebar-content-list:empty::after {
  content: 'No results';
  display: block;
  text-align: center;
  padding: 2rem;
  color: #888;
  font-size: 0.875rem;
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Card fade-in animation with subtle upward movement */
#sidebar-content-list > * {
  animation: fadeInUp 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* Staggered animation for cards (first 20 cards) */
#sidebar-content-list > *:nth-child(1) { animation-delay: 0ms; }
#sidebar-content-list > *:nth-child(2) { animation-delay: 30ms; }
#sidebar-content-list > *:nth-child(3) { animation-delay: 60ms; }
#sidebar-content-list > *:nth-child(4) { animation-delay: 90ms; }
#sidebar-content-list > *:nth-child(5) { animation-delay: 120ms; }
#sidebar-content-list > *:nth-child(6) { animation-delay: 150ms; }
#sidebar-content-list > *:nth-child(7) { animation-delay: 180ms; }
#sidebar-content-list > *:nth-child(8) { animation-delay: 210ms; }
#sidebar-content-list > *:nth-child(9) { animation-delay: 240ms; }
#sidebar-content-list > *:nth-child(10) { animation-delay: 270ms; }
#sidebar-content-list > *:nth-child(n+11) { animation-delay: 300ms; }

/* ==========================================================================
   Claims Staking Activity Styles (within Sidebar)
   Modern card-based design matching projects/news/mineral occurrences
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  width: 100%;
}

/* Title - cleaner, modern style */
#sidebar-content-list #claims-staking-activity-content > div:first-child {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 0;
  color: #64748b;
  background: linear-gradient(to bottom, #f8fafc, transparent);
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0;
}

/* Top controls row - modern toolbar style */
#sidebar-content-list #claims-staking-activity-content > div:nth-child(2) {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: #f8fafc;
  border-radius: 8px;
  margin: 0 0 0.5rem 0;
}

#sidebar-content-list #claims-staking-activity-content > div:nth-child(2) sl-button::part(base) {
  font-size: 0.8125rem;
}

/* ==========================================================================
   Date Bucket Cards - Modern card styling
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket] {
  --bucket-color: #64748b;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="s7days"] {
  --bucket-color: #0369a1;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="s30days"] {
  --bucket-color: #0891b2;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="e24hours"] {
  --bucket-color: #b91c1c;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="e7days"] {
  --bucket-color: #dc2626;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="e30days"] {
  --bucket-color: #ea580c;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket="other"] {
  --bucket-color: #64748b;
}

/* Disabled bucket styles - for users who can't view claim dates */
#sidebar-content-list #claims-staking-activity-content > sl-details.claims-bucket-disabled {
  opacity: 0.6;
  cursor: pointer;
}

#sidebar-content-list #claims-staking-activity-content > sl-details.claims-bucket-disabled::part(base) {
  background: #f1f5f9;
}

#sidebar-content-list #claims-staking-activity-content > sl-details.claims-bucket-disabled::part(summary) {
  cursor: pointer;
}

#sidebar-content-list #claims-staking-activity-content > sl-details.claims-bucket-disabled::part(header) {
  pointer-events: none;
}

#sidebar-content-list #claims-staking-activity-content > sl-details::part(base) {
  border: 1px solid var(--sidebar-border);
  border-left: 4px solid var(--bucket-color);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.5rem;
  background: var(--sidebar-bg-solid);
  overflow: hidden;
  transition: all 200ms ease;
}

#sidebar-content-list #claims-staking-activity-content > sl-details:hover::part(base) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#sidebar-content-list #claims-staking-activity-content > sl-details::part(header) {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  transition: background-color 150ms ease;
}

#sidebar-content-list #claims-staking-activity-content > sl-details:hover::part(header) {
  background: rgba(0, 0, 0, 0.02);
}

#sidebar-content-list #claims-staking-activity-content > sl-details[open]::part(header) {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  border-bottom: 1px solid var(--sidebar-border);
}

#sidebar-content-list #claims-staking-activity-content > sl-details::part(header):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-blue);
}

#sidebar-content-list #claims-staking-activity-content > sl-details::part(content) {
  padding: 0;
}

/* Bucket header summary - modern layout */
#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket] > [slot="summary"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  font-size: 0.8125rem;
}

/* Count badge - pill style matching other cards */
#sidebar-content-list #claims-staking-activity-content .claims-activity-count-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bucket-color);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 1.75rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Download and visibility action buttons in bucket header */
#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket] sl-icon-button {
  font-size: 0.875rem;
  color: #64748b;
  transition: color 150ms ease;
}

#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket] sl-icon-button:hover {
  color: var(--color-blue);
}

#sidebar-content-list #claims-staking-activity-content .toggle-visibility-btn {
  font-size: 1rem;
}

/* ==========================================================================
   Owner Groups - Card-like styling
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content .owners-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fafbfc;
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group::part(base) {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: white;
  margin-bottom: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 150ms ease;
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group:hover::part(base) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group::part(header) {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group[open]::part(header) {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group::part(content) {
  padding: 0;
}

/* Owner name with count badge */
#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group [slot="summary"] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

#sidebar-content-list #claims-staking-activity-content .claims-activity-owner-group [slot="summary"] span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 35, 66, 0.08);
  color: #334155;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 1.25rem;
}

/* ==========================================================================
   Claims Table - Clean, modern data table
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table th {
  background: #f1f5f9;
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: #64748b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: #475569;
  border-left-color: transparent !important;
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table tr[data-tenureid] {
  cursor: pointer;
  transition: all 150ms ease;
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table tr[data-tenureid]:hover {
  background: rgba(0, 145, 175, 0.06);
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table tr[data-tenureid]:hover td {
  color: var(--color-blue);
}

/* Alternating row colors for better readability */
#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table tbody tr:nth-child(even):hover {
  background: rgba(0, 145, 175, 0.06);
}

/* ID column - monospace for better alignment */
#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-table td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  color: #64748b;
}

/* Date columns - highlight expiring dates */
#sidebar-content-list #claims-staking-activity-content > sl-details[data-datebucket^="e"] .claims-staking-activity-owner-group-table td:last-child {
  color: var(--bucket-color);
  font-weight: 500;
}

/* ==========================================================================
   Pagination - Modern button group
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content .claims-staking-activity-owner-group-paging {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  gap: 0.75rem;
  background: #f8fafc;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#sidebar-content-list #claims-staking-activity-content .staking-activity-paging-button {
  flex: 1;
}

#sidebar-content-list #claims-staking-activity-content .staking-activity-paging-button::part(base) {
  font-size: 0.75rem;
  height: 2rem;
}

/* Details content container */
#sidebar-content-list #claims-staking-activity-content .details-content {
  padding: 0;
}

/* ==========================================================================
   View Mode & Download Controls
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content #claims-selected-view-mode,
#sidebar-content-list #claims-staking-activity-content #claims-download-all-button {
  flex: 1;
}

/* Claims toolbar - view mode and download buttons */
#sidebar-content-list #claims-staking-activity-content .claims-toolbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #f8fafc;
  border-radius: 8px;
  margin: 0 0 0.5rem 0;
}

#sidebar-content-list #claims-staking-activity-content .claims-toolbar > div {
  flex: 1;
}

#sidebar-content-list #claims-staking-activity-content .claims-toolbar sl-dropdown {
  width: 100%;
}

#sidebar-content-list #claims-staking-activity-content .claims-toolbar sl-button[slot="trigger"] {
  width: 100%;
}

#sidebar-content-list #claims-staking-activity-content .claims-toolbar sl-button::part(base) {
  width: 100%;
  justify-content: center;
  height: 2.25rem;
  font-size: 0.8125rem;
}

/* View mode context - inline draw instructions */
#sidebar-content-list #claims-staking-activity-content #claims-selected-view-mode-context {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem 0;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 0.8125rem;
}

#sidebar-content-list #claims-staking-activity-content #claims-selected-view-mode-context .claims-draw-instruction {
  flex: 1;
  color: #64748b;
  font-size: 0.8125rem;
}

#sidebar-content-list #claims-staking-activity-content #claims-selected-view-mode-context sl-button::part(base) {
  color: #64748b;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

#sidebar-content-list #claims-staking-activity-content #claims-selected-view-mode-context sl-button:hover::part(base) {
  color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
}

/* Truncation warning */
#sidebar-content-list #claims-staking-activity-content #claims-staking-activity-truncated {
  margin: 0.5rem 0;
  font-size: 0.8125rem;
}

/* Loading spinner for pagination */
#sidebar-content-list #claims-staking-activity-content .owners-group-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

#sidebar-content-list #claims-staking-activity-content .owners-list:empty::after {
  content: 'No claims in this category';
  display: block;
  text-align: center;
  padding: 1.5rem;
  color: #94a3b8;
  font-size: 0.8125rem;
  font-style: italic;
}

/* ==========================================================================
   Print Styles - Hide sidebar when printing
   ========================================================================== */

@media print {
  #unified-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   Old Mobile Styles - REMOVED
   These have been superseded by the new bottom sheet styles at end of file
   ========================================================================== */

/* ==========================================================================
   Shared Card Base Styles

   Base styles shared by all card types in the sidebar:
   - project-card-modern
   - news-card-modern
   - movers-card-modern
   - mineral-occurrence-card-modern
   - drilling-card-modern
   - my-areas-card-modern
   ========================================================================== */

.sidebar-card {
  background: var(--sidebar-bg-solid);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 200ms ease;
}

.sidebar-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.sidebar-card.currently-viewing {
  border-color: var(--color-blue);
}

/*
 * Note: Each card type has its own inner class for the left border accent:
 * - .project-card-inner
 * - .news-card-inner
 * - .movers-card-inner
 * - .mo-card-inner (mineral occurrences)
 * - .drilling-card-inner
 * - .my-areas-card-inner
 *
 * These inherit the same pattern: border-left: 3px solid var(--accent-color)
 * The currently-viewing state sets border-left-color: var(--color-blue)
 * This is handled by .sidebar-card.currently-viewing for the outer border.
 */

/* ==========================================================================
   Modern Project Cards
   ========================================================================== */

/* Project cards extend .sidebar-card base class */

.project-card-inner {
  border-left: 3px solid var(--accent-color, #64748b);
}

/* Layout with thumbnail and content side by side */
.project-card-layout {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

/* Small thumbnail area - shows project shape SVG */
.project-card-thumbnail {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  align-self: flex-start;
  background: var(--color-border-light, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG styling within the thumbnail */
.project-card-thumbnail svg {
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}

.project-card-thumbnail svg path,
.project-card-thumbnail svg circle {
  fill: color-mix(in srgb, var(--thumb-color, #64748b) 25%, transparent);
  stroke: color-mix(in srgb, var(--thumb-color, #64748b) 60%, transparent);
}

/* Content area takes remaining space */
.project-card-content {
  flex: 1;
  min-width: 0;
}

/* Header with title and stage */
.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.project-card-title-section {
  flex: 1;
  min-width: 0;
}

.project-card-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 200ms ease;
}

/* Meta row with commodities and area */
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.project-card-commodity {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: color-mix(in srgb, var(--commodity-color, #64748b) 15%, transparent);
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--commodity-color, #555);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid color-mix(in srgb, var(--commodity-color, #64748b) 30%, transparent);
}

.project-card-area {
  font-size: 0.6875rem;
  color: #888;
  white-space: nowrap;
}

.project-card-area sup {
  font-size: 0.5rem;
}

/* Stage badge */
.project-card-stage {
  flex-shrink: 0;
  padding: 0.1875rem 0.5rem;
  background: transparent;
  color: #94a3b8;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Company section */
.project-card-company {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.project-card-company-role {
  font-size: 0.625rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-card-company-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333;
}

.project-card-ticker {
  font-size: 0.75rem;
  color: #666;
}

/* Special badges (Flagship, VRIFY) */
.project-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.project-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.project-card-badge.flagship {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
}

.project-card-badge.flagship svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.project-card-badge.vrify {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: white;
}

.project-card-badge.vrify img {
  width: 12px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* Hover state enhancements */
.project-card-modern:hover .project-card-name {
  color: var(--color-blue);
}

/* Currently viewing state - extends .sidebar-card.currently-viewing */
.project-card-modern.currently-viewing {
  background: rgba(0, 145, 175, 0.03);
}

/* Responsive adjustments for project cards */
@media (max-width: 900px) {
  .project-card-layout {
    padding: 0.75rem;
  }

  .project-card-thumbnail {
    width: 40px;
    height: 40px;
  }

  .project-card-name {
    font-size: 0.875rem;
  }

  .project-card-company-name {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Modern News Cards
   ========================================================================== */

/* News cards extend .sidebar-card base class */

.news-card-inner {
  border-left: 3px solid var(--accent-color, #64748b);
  padding: 0.875rem 1rem;
}

/* Header with tags and date */
.news-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.news-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex: 1;
}

.news-card-tags .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  white-space: nowrap;
}

/* Colored tags for news type categories - subtle styling */
.news-card-tags .tag.tag-colored {
  background: #f1f5f9;
  color: #475569;
  border: none;
}

/* News category color legend */
.news-category-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--sidebar-border);
  font-size: 0.6875rem;
}

.news-category-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.news-category-legend-color {
  width: 3px;
  height: 12px;
  border-radius: 1px;
  flex-shrink: 0;
}

.news-category-legend-label {
  color: #64748b;
  white-space: nowrap;
}

/* Mineral Occurrences category color legend */
.mo-category-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--sidebar-border);
  font-size: 0.6875rem;
}

.mo-category-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mo-category-legend-color {
  width: 3px;
  height: 12px;
  border-radius: 1px;
  flex-shrink: 0;
}

.mo-category-legend-label {
  color: #64748b;
  white-space: nowrap;
}

.news-card-date {
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Company info - eyebrow style */
.news-card-company {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.news-card-company-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-card-ticker {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Title */
.news-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 200ms ease;
}

.news-card-modern:hover .news-card-title {
  color: var(--color-blue);
}

/* Excerpt */
.news-card-excerpt-wrapper {
  display: flex;
  gap: 0.75rem;
}

.news-card-excerpt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Featured news (subscribed companies) */
.news-card-modern.featured .news-card-inner {
  background: linear-gradient(to right, rgba(0, 145, 175, 0.03), transparent);
}

.news-card-modern.featured .news-card-company-name {
  color: #475569;
}

/* Logo for featured news */
.news-card-modern .news-card-logo-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-modern .news-card-logo-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Currently viewing state - handled by .sidebar-card.currently-viewing */

/* ==========================================================================
   MOVERS CARD - Modern Style
   ========================================================================== */

/* Movers cards extend .sidebar-card base class */

.movers-card-inner {
  border-left: 3px solid var(--accent-color, #64748b);
  padding: 0.875rem 1rem;
}

/* Header with tags and date */
.movers-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.movers-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex: 1;
}

.movers-card-tags .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: #f1f5f9;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  white-space: nowrap;
}

.movers-card-date {
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Company info - eyebrow style */
.movers-card-company {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.movers-card-company-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.movers-card-ticker {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Title row with change badge */
.movers-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.movers-card-change {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.movers-card-change.positive {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

.movers-card-change.negative {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.movers-card-change.neutral {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.movers-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1e293b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 200ms ease;
}

.movers-card-modern:hover .movers-card-title {
  color: var(--color-blue);
}

/* Stats row */
.movers-card-stats {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid #f1f5f9;
}

.movers-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.movers-stat-label {
  font-size: 0.5625rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.movers-stat-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Currently viewing state - handled by .sidebar-card.currently-viewing */

/* Responsive adjustments for movers cards */
@media (max-width: 400px) {
  .movers-card-inner {
    padding: 0.75rem;
  }

  .movers-card-stats {
    flex-wrap: wrap;
  }

  .movers-stat {
    flex: 0 0 calc(50% - 0.25rem);
  }
}

/* Responsive adjustments for news cards */
@media (max-width: 900px) {
  .news-card-inner {
    padding: 0.75rem;
  }

  .news-card-title {
    font-size: 0.875rem;
  }

  .news-card-excerpt {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
  }
}

/* ==========================================================================
   Modern Mineral Occurrence Cards
   ========================================================================== */

/* Mineral occurrence cards extend .sidebar-card base class */

.mo-card-inner {
  border-left: 3px solid var(--category-color, #808080);
}

.mo-card-layout {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

/* Icon wrapper - shows category icon */
.mo-card-icon-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--category-color, #808080) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mo-card-icon-wrapper svg {
  width: 18px;
  height: 18px;
  fill: var(--category-color, #808080);
}

/* Content area */
.mo-card-content {
  flex: 1;
  min-width: 0;
}

/* Header with name and category badge */
.mo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.mo-card-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.3;
  transition: color 200ms ease;
}

.mineral-occurrence-card-modern:hover .mo-card-name {
  color: var(--color-blue);
}

.mo-card-category {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  background: color-mix(in srgb, var(--category-color, #808080) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--category-color, #808080) 30%, transparent);
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--category-color, #808080);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Details rows */
.mo-card-details {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.mo-card-detail-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mo-card-label {
  font-size: 0.6875rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mo-card-value,
.mo-card-number {
  font-size: 0.8125rem;
  color: #475569;
  font-weight: 500;
}

.mo-card-number-link {
  font-size: 0.8125rem;
  color: var(--color-blue);
  font-weight: 500;
  text-decoration: none;
}

.mo-card-number-link:hover {
  text-decoration: underline;
}

/* Commodities tags */
.mo-card-commodities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.mo-card-commodity {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.mo-card-commodity.mo-card-more {
  background: transparent;
  color: #94a3b8;
}

/* Deposit type row */
.mo-card-deposits {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.mo-card-deposit-value {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

/* Locked content */
.mo-card-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mo-card-locked .blur-text {
  filter: blur(3px);
  user-select: none;
}

.mo-card-locked sl-icon {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Currently viewing state - handled by .sidebar-card.currently-viewing */

/* Responsive adjustments */
@media (max-width: 900px) {
  .mo-card-layout {
    padding: 0.75rem;
  }

  .mo-card-icon-wrapper {
    width: 32px;
    height: 32px;
  }

  .mo-card-icon-wrapper svg {
    width: 14px;
    height: 14px;
  }

  .mo-card-name {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Modern Drilling Cards
   ========================================================================== */

/* Drilling cards extend .sidebar-card base class */

.drilling-card-modern .drilling-card-inner {
  border-left: 3px solid var(--accent-color, #64748b);
}

/* Main layout - donut on left, content on right */
.drilling-card-modern .drilling-card-layout {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
}

/* Donut section - compact vertical layout */
.drilling-card-modern .drilling-card-donut-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 56px;
}

.drilling-card-modern .drilling-card-donut-wrapper {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drilling-card-modern .drilling-card-donut-wrapper .donut {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Legend - compact below donut */
.drilling-card-modern .drilling-card-legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.drilling-card-modern .drilling-card-legend .drilling-card-icon-legend-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.5625rem;
  color: #64748b;
  white-space: nowrap;
}

.drilling-card-modern .drilling-card-legend .drilling-legend-swatch {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

.drilling-card-modern .drilling-card-legend .drilling-legend-value {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Content section */
.drilling-card-modern .drilling-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Header with title and grade badge */
.drilling-card-modern .drilling-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.drilling-card-modern .drilling-card-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.drilling-card-modern .drilling-card-project-name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  transition: color 200ms ease;
}

.drilling-card-modern .drilling-card-date {
  font-size: 0.6875rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.drilling-card-modern:hover .drilling-card-project-name {
  color: var(--color-blue);
}

/* Company row */
.drilling-card-modern .drilling-card-company-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.drilling-card-modern .drilling-card-company-name {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.drilling-card-modern .drilling-card-ticker {
  font-size: 0.6875rem;
  color: #94a3b8;
}

/* Grade badge - prominent display of key metric */
.drilling-card-modern .drilling-card-grade-badge {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, var(--accent-color, #64748b) 0%, color-mix(in srgb, var(--accent-color, #64748b) 80%, black) 100%);
  color: white;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Data table - horizontal layout (override map-page-new.css) */
.drilling-card-modern .drilling-card-data-table {
  background: #f8fafc;
  border-radius: 4px;
  padding: 0.25rem;
  overflow-x: auto;
}

.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 0;
  font-size: 0.625rem;
  margin: 0;
  line-height: 1.2;
}

.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table > div {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  min-width: 38px;
  text-align: center;
}

/* .drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table > div:last-child {
  flex-grow: 1 !important;
  text-align: left !important;
} */

.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table-header-cell,
.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table-body-cell {
  padding: 0.125rem 0.25rem !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
}

.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table-header-cell {
  font-weight: 600;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #64748b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap;
}

.drilling-card-modern .drilling-card-data-table .drilling-card-mineral-table-body-cell {
  font-weight: 600;
  font-size: 0.6875rem;
  color: #1e293b;
}

/* Footer with news headline and date */
.drilling-card-modern .drilling-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.drilling-card-modern .drilling-card-news-headline {
  flex: 1;
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drilling-card-modern .drilling-card-date {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: #94a3b8;
  white-space: nowrap;
}

/* Currently viewing state - handled by .sidebar-card.currently-viewing */

/* Responsive adjustments for drilling cards */
@media (max-width: 900px) {
  .drilling-card-modern .drilling-card-layout {
    padding: 0.625rem;
    gap: 0.5rem;
  }

  .drilling-card-modern .drilling-card-donut-section {
    width: 44px;
  }

  .drilling-card-modern .drilling-card-donut-wrapper {
    width: 44px;
    height: 44px;
  }

  .drilling-card-modern .drilling-card-project-name {
    font-size: 0.8125rem;
  }

  .drilling-card-modern .drilling-card-grade-badge {
    font-size: 0.5625rem;
    padding: 0.1875rem 0.375rem;
  }

  .drilling-card-modern .drilling-card-news-headline {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

/* ==========================================================================
   MY AREAS CARD - Modern Style
   ========================================================================== */

/* My Areas cards extend .sidebar-card base class */

.my-areas-card-inner {
  border-left: 3px solid var(--color-blue);
  padding: 0.875rem 1rem;
}

/* Header with title and date */
.my-areas-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.my-areas-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1e293b;
  transition: color 200ms ease;
}

.my-areas-card-modern:hover .my-areas-card-title {
  color: var(--color-blue);
}

.my-areas-card-date {
  font-size: 0.6875rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Toggle row */
.my-areas-card-toggle-row {
  margin-bottom: 0.75rem;
}

.my-areas-card-toggle-row sl-switch {
  --sl-toggle-size-small: 1rem;
}

.my-areas-card-toggle-row sl-switch::part(label) {
  font-size: 0.75rem;
  color: #64748b;
}

/* Notifications section */
.my-areas-card-notifications {
  background: #f8fafc;
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
}

.my-areas-card-notifications-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.my-areas-card-notifications-icon {
  display: flex;
  align-items: center;
  color: #64748b;
}

.my-areas-card-notifications-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  flex: 1;
}

.my-areas-card-notifications-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-areas-card-notifications-badge.active {
  background: rgba(0, 145, 175, 0.1);
  color: var(--color-blue);
}

.my-areas-card-notifications-badge.disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

/* Notification type pills */
.my-areas-card-notification-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.my-areas-notification-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 500;
  white-space: nowrap;
}

.my-areas-notification-pill.enabled {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.my-areas-notification-pill.enabled svg {
  stroke: #16a34a;
}

.my-areas-notification-pill.disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.my-areas-notification-pill.disabled svg {
  stroke: #94a3b8;
}

/* Action buttons */
.my-areas-card-actions {
  display: flex;
  gap: 0.5rem;
}

.my-areas-card-actions .my-areas-card-button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  border: 1px solid transparent;
}

.my-areas-card-actions .my-areas-card-button.edit {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.my-areas-card-actions .my-areas-card-button.edit:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.my-areas-card-actions .my-areas-card-button.edit svg {
  stroke: currentColor;
}

.my-areas-card-actions .my-areas-card-button.delete {
  background: rgba(239, 68, 68, 0.05);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
}

.my-areas-card-actions .my-areas-card-button.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.my-areas-card-actions .my-areas-card-button.delete svg {
  stroke: currentColor;
}

/* Currently viewing state - border handled by .sidebar-card.currently-viewing */
.my-areas-card-modern.currently-viewing .my-areas-card-inner {
  background: rgba(0, 145, 175, 0.03);
}

/* Add New Area button styling */
#add-my-area-button-wrapper {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--sidebar-bg-solid) 60%, transparent);
  margin-top: 0.5rem;
}

#add-my-area-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--color-blue);
  color: white;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  border: none;
}

#add-my-area-button:hover {
  background: var(--color-blue-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 145, 175, 0.3);
}

#add-my-area-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .my-areas-card-inner {
    padding: 0.75rem;
  }

  .my-areas-card-title {
    font-size: 0.875rem;
  }

  .my-areas-card-actions {
    flex-direction: column;
  }

  .my-areas-card-actions .my-areas-card-button {
    width: 100%;
  }
}

/* ==========================================================================
   ADD/EDIT MY AREA VIEW
   ========================================================================== */

#sidebar-view-add-my-area {
  background: var(--sidebar-bg-solid);
  display: flex;
  flex-direction: column;
}

#sidebar-add-my-area-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 0.5rem;
  background: var(--sidebar-bg-solid);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

#sidebar-add-my-area-header button {
  background: none;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

#sidebar-add-my-area-header button:hover {
  background: var(--sidebar-hover);
  color: var(--text-primary);
}

#sidebar-add-my-area-header button svg {
  width: 18px;
  height: 18px;
}

#sidebar-add-my-area-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

#sidebar-add-my-area-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* Sections */
#sidebar-add-my-area-content .add-my-area-section {
  background: #f8fafc;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: opacity 200ms ease;
}

#sidebar-add-my-area-content .add-my-area-section.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.add-my-area-section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.add-my-area-section-number {
  width: 24px;
  height: 24px;
  background: var(--color-blue);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

#sidebar-add-my-area-content .add-my-area-section.disabled .add-my-area-section-number {
  background: #94a3b8;
}

.add-my-area-section-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1e293b;
}

#add-my-area-name {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}

#add-my-area-name:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 145, 175, 0.1);
}

/* Spatial tools */
#add-my-area-spatial-tools-wrapper {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  background: white;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper:hover {
  border-color: var(--color-blue);
  background: rgba(0, 145, 175, 0.03);
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper.selected {
  border-color: var(--color-blue);
  background: rgba(0, 145, 175, 0.08);
}

.spatial-input-mode-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper.selected .spatial-input-mode-icon {
  color: var(--color-blue);
}

.spatial-input-mode-icon svg {
  width: 24px;
  height: 24px;
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper span {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
  text-align: center;
}

#sidebar-add-my-area-content .spatial-input-mode-wrapper.selected span {
  color: var(--color-blue);
}

/* Spatial content areas */
.define-spatial-area-content-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

#sidebar-add-my-area-content .define-spatial-area-content {
  display: none;
}

#sidebar-add-my-area-content .define-spatial-area-content.selected {
  display: block;
}

.define-spatial-area-content-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.define-spatial-area-content-buttons .sidebar-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
}

.define-spatial-area-content-buttons .sidebar-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Upload labels */
#sidebar-add-my-area-content #upload-spatial-file-input-wrapper,
#sidebar-add-my-area-content #upload-claims-file-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: white;
  border: 2px dashed var(--sidebar-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: center;
}

#sidebar-add-my-area-content #upload-spatial-file-input-wrapper:hover,
#sidebar-add-my-area-content #upload-claims-file-input-wrapper:hover {
  border-color: var(--color-blue);
  background: rgba(0, 145, 175, 0.03);
}

#sidebar-add-my-area-content #upload-spatial-file-input-wrapper svg,
#sidebar-add-my-area-content #upload-claims-file-input-wrapper svg {
  width: 32px;
  height: 32px;
  color: #94a3b8;
}

#sidebar-add-my-area-content #upload-spatial-file-input-wrapper span,
#sidebar-add-my-area-content #upload-claims-file-input-wrapper span {
  font-size: 0.8125rem;
  color: #64748b;
}

.upload-claims-region-select {
  margin-bottom: 0.75rem;
}

.upload-claims-region-select label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.upload-claims-region-select select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
}

/* Email preferences */
#add-my-area-preferences-wrapper fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

#add-my-area-preferences-wrapper legend {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  cursor: pointer;
}

.radio-option span,
.checkbox-option span {
  font-size: 0.8125rem;
  color: #334155;
}

.radio-option input,
.checkbox-option input {
  accent-color: var(--color-blue);
}

/* Footer */
#sidebar-add-my-area-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-solid);
}

#sidebar-add-my-area-footer .sidebar-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  border: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#sidebar-add-my-area-footer .sidebar-btn.primary {
  background: var(--primary-color, #182342);
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#sidebar-add-my-area-footer .sidebar-btn.primary:hover {
  background: var(--primary-color-dark, #0f1629);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#sidebar-add-my-area-footer .sidebar-btn.secondary {
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

#sidebar-add-my-area-footer .sidebar-btn.secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Warnings */
#main-save-warning,
#spatial-filter-file-upload-warning,
#claims-file-upload-warning {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

#main-save-warning .upload-warning-title,
#spatial-filter-file-upload-warning .upload-warning-title,
#claims-file-upload-warning .upload-warning-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: #dc2626;
  margin-bottom: 0.25rem;
}

#main-save-warning .upload-warning-text,
#spatial-filter-file-upload-warning .upload-warning-text,
#claims-file-upload-warning .upload-warning-text {
  font-size: 0.75rem;
  color: #b91c1c;
}

#main-save-warning-close {
  float: right;
  cursor: pointer;
  font-size: 1rem;
  color: #dc2626;
}

/* ==========================================================================
   Filters View
   ========================================================================== */

#sidebar-view-filters {
  background: var(--sidebar-bg-solid);
  display: flex;
  flex-direction: column;
}

/* Header - matches details header exactly */
#sidebar-filters-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 0.5rem;
  background: var(--sidebar-bg-solid);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

#sidebar-filters-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
}

#sidebar-filters-back:hover {
  background: rgba(0, 0, 0, 0.04);
}

#sidebar-filters-back svg {
  width: 16px;
  height: 16px;
}

#sidebar-filters-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-filters-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
}

#sidebar-filters-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Filter content area */
#sidebar-filters-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 1.25rem 1rem;
}

/* Modern filter wrapper styling */
#sidebar-filters-content .filters-for-specific-source-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual filter groups */
#sidebar-filters-content .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0;
}

/* First filter group gets no top padding */
#sidebar-filters-content .filter-group:first-child {
  padding-top: 0;
}

#sidebar-filters-content .filter-group > label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Override old filter wrapper styles when inside sidebar */
#sidebar-filters-content .filters-for-specific-source-wrapper .filter-group-wrapper {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}

/* Clean up multiselect dropdowns */
#sidebar-filters-content .multiselect-widget-wrapper {
  border-radius: 8px;
}

#sidebar-filters-content .multiselect-widget-trigger {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  min-height: 42px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#sidebar-filters-content .multiselect-widget-trigger:hover {
  border-color: #cbd5e1;
}

#sidebar-filters-content .multiselect-widget-trigger:focus-within {
  border-color: var(--primary-color, #182342);
  box-shadow: 0 0 0 3px rgba(24, 35, 66, 0.1);
}

/* Range sliders - reduce internal padding */
#sidebar-filters-content .range-selector-wrapper {
  padding: 0;
  margin-top: -0.25rem;
}

/* Location search styling */
#sidebar-filters-content .location-search-wrapper input,
#sidebar-filters-content .autocomplete-searchbar-widget input {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  min-height: 42px;
  padding: 0.5rem 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#sidebar-filters-content .location-search-wrapper input:hover,
#sidebar-filters-content .autocomplete-searchbar-widget input:hover {
  border-color: #cbd5e1;
}

#sidebar-filters-content .location-search-wrapper input:focus,
#sidebar-filters-content .autocomplete-searchbar-widget input:focus {
  border-color: var(--primary-color, #182342);
  box-shadow: 0 0 0 3px rgba(24, 35, 66, 0.1);
  outline: none;
}

/* Date range picker */
#sidebar-filters-content .daterangepicker-widget-wrapper {
  border-radius: 8px;
}

#sidebar-filters-content .daterangepicker-widget-trigger {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  min-height: 42px;
}

/* Actions footer - sticky at bottom */
#sidebar-filters-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-solid);
  flex-shrink: 0;
}

#sidebar-filters-actions .sidebar-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  border: none;
}

#sidebar-filters-actions .sidebar-btn.primary {
  background: var(--primary-color, #182342);
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#sidebar-filters-actions .sidebar-btn.primary:hover {
  background: var(--primary-color-dark, #0f1629);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#sidebar-filters-actions .sidebar-btn.secondary {
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

#sidebar-filters-actions .sidebar-btn.secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* No filters message */
#sidebar-filters-content .no-filters-message {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Filters view width - same as content view */
#unified-sidebar.expanded.view-filters {
  width: var(--sidebar-content-width);
}

/* ==========================================================================
   Active Filter Chips - Persistent across all views
   ========================================================================== */

#sidebar-active-filters {
  display: none;
  flex-direction: column;
  background: #fffbeb;
  border-top: 1px solid #fcd34d;
  padding: 0;
  max-height: 140px;
  min-height: 69px;
  overflow: hidden;
}

#sidebar-active-filters.has-filters {
  display: flex;
}

/* Hide active filters when sidebar is collapsed */
#unified-sidebar.collapsed #sidebar-active-filters {
  display: none !important;
}

#sidebar-active-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem 0.25rem;
  flex-shrink: 0;
}

#sidebar-active-filters-header span {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #92400e;
  letter-spacing: 0.025em;
}

#sidebar-clear-all-filters {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #b45309;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  transition: background-color 150ms ease, color 150ms ease;
}

#sidebar-clear-all-filters:hover {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
}

#sidebar-active-filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem 0.5rem;
  overflow-y: auto;
  max-height: 90px;
}

/* Individual filter chip */
.sidebar-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 100px;
  font-size: 0.6875rem;
  color: #78350f;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
  max-width: 100%;
}

.sidebar-filter-chip:hover {
  background: #fde68a;
  border-color: #fbbf24;
}

.sidebar-filter-chip-source {
  font-weight: 600;
  text-transform: capitalize;
}

.sidebar-filter-chip-separator {
  color: #d97706;
  font-weight: 400;
}

.sidebar-filter-chip-type {
  font-weight: 500;
}

.sidebar-filter-chip-value {
  color: #92400e;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.125rem;
  color: #b45309;
  flex-shrink: 0;
}

.sidebar-filter-chip-remove svg {
  width: 10px;
  height: 10px;
}

.sidebar-filter-chip:hover .sidebar-filter-chip-remove {
  color: #92400e;
}

/* ==========================================================================
   Help Panel
   ========================================================================== */

#sidebar-help-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: 50px;
  flex-shrink: 0;
}

#sidebar-help-back,
#sidebar-help-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  transition: all 150ms ease;
  flex-shrink: 0;
}

#sidebar-help-back:hover,
#sidebar-help-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}

#sidebar-help-back svg,
#sidebar-help-close svg {
  width: 18px;
  height: 18px;
}

#sidebar-help-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}

#sidebar-help-close {
  margin-left: auto;
}

#sidebar-help-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.help-topics-list {
  display: flex;
  flex-direction: column;
}

.help-topics-header {
  padding: 1.5rem 1rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.help-topics-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}

.help-topics-header p {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
}

.help-topic-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 150ms ease;
}

.help-topic-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.help-topic-item:active {
  background: rgba(0, 0, 0, 0.05);
}

.help-topic-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.7);
}

.help-topic-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.help-topic-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
}

.help-topic-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.4);
  transition: transform 150ms ease, color 150ms ease;
}

.help-topic-item:hover .help-topic-arrow {
  color: rgba(0, 0, 0, 0.6);
  transform: translateX(2px);
}

.help-topic-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
}

.help-section {
  padding-bottom: 0.5rem;
}

.help-section:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0.5rem;
}

.help-section-title {
  padding: 1rem 1rem 0.25rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(0, 0, 0, 0.5);
}

.help-section-subtitle {
  padding: 0 1rem 0.5rem;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.help-topic-info {
  flex: 1;
  min-width: 0;
}

.help-topic-info .help-topic-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
}

.help-topic-description {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 2px;
  line-height: 1.4;
}

.help-topic-featured {
  background: linear-gradient(135deg, rgba(0, 145, 175, 0.08) 0%, rgba(0, 145, 175, 0.04) 100%);
  border: 1px solid rgba(0, 145, 175, 0.15);
  border-radius: 8px;
  margin: 0.5rem 1rem;
}

.help-topic-featured:hover {
  background: linear-gradient(135deg, rgba(0, 145, 175, 0.12) 0%, rgba(0, 145, 175, 0.06) 100%);
  border-color: rgba(0, 145, 175, 0.25);
}

.help-topic-featured .help-topic-icon {
  background: rgba(0, 145, 175, 0.15);
  color: #0091af;
}

.help-topic-featured .help-topic-icon svg {
  stroke: currentColor;
  fill: none;
}

/* Help link items (Contact Us, Schedule Demo) */
.help-link-item {
  text-decoration: none;
  color: inherit;
}

.help-link-item:hover {
  text-decoration: none;
}

/* Legal section at bottom of help */
.help-section-legal {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  border-bottom: none !important;
}

.help-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  font-size: 11px;
  color: #6b7280;
}

.help-legal-links a {
  color: #6b7280;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.help-legal-links a:hover {
  color: #0091af;
  background-color: rgba(0, 145, 175, 0.08);
}

.help-legal-separator {
  color: #d1d5db;
  user-select: none;
}

/* ==========================================================================
   Export Panel Styles
   ========================================================================== */

.export-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.export-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.export-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.export-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.export-section-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0091af 0%, #007a94 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
}

.export-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

/* Area Selection */
.export-area-options {
  display: flex;
  gap: 0.5rem;
}

.export-area-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-area-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.export-area-btn.active {
  border-color: #0091af;
  background: rgba(0, 145, 175, 0.05);
}

.export-area-icon {
  width: 24px;
  height: 24px;
  color: #64748b;
}

.export-area-btn.active .export-area-icon {
  color: #0091af;
}

.export-area-icon svg {
  width: 100%;
  height: 100%;
}

.export-area-label {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  text-align: center;
  line-height: 1.2;
}

.export-area-btn.active .export-area-label {
  color: #0091af;
}

.export-area-details {
  margin-top: 0.75rem;
  display: block;
}

.export-myarea-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 2px solid #0091af;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  cursor: pointer;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 145, 175, 0.15);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230091af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.export-myarea-select:focus {
  outline: none;
  border-color: #0091af;
  box-shadow: 0 0 0 2px rgba(0, 145, 175, 0.1);
}

.export-no-areas {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 0.5rem;
}

.export-drawn-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 145, 175, 0.05);
  border: 1px solid rgba(0, 145, 175, 0.2);
  border-radius: 6px;
}

.export-drawn-area-info {
  font-size: 12px;
  font-weight: 500;
  color: #0091af;
}

.export-clear-area-btn {
  padding: 0.25rem;
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.export-clear-area-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.export-clear-area-btn svg {
  width: 16px;
  height: 16px;
}

.export-drawing-instructions {
  padding: 0.75rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  text-align: center;
}

.instruction-text {
  font-size: 12px;
  color: #92400e;
}

/* Layer Selection */
.export-layers-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.export-layer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-layer-item:hover:not(.disabled) {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.export-layer-item.selected {
  border-color: #0091af;
  background: rgba(0, 145, 175, 0.05);
}

.export-layer-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.export-layer-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.export-layer-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.export-layer-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.export-layer-checkmark svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.export-layer-item.selected .export-layer-checkmark {
  background: #0091af;
  border-color: #0091af;
}

.export-layer-item.selected .export-layer-checkmark svg {
  opacity: 1;
}

.export-layer-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

.export-layer-label {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.export-layer-count {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.export-layer-count.over-limit {
  color: #f59e0b;
}

.export-warning-icon {
  display: inline-flex;
  color: #f59e0b;
}

.export-warning-icon svg {
  width: 14px;
  height: 14px;
}

.export-layer-locked {
  font-size: 10px;
  font-weight: 500;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* Format Selection */
.export-format-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.export-format-btn {
  padding: 0.5rem 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.export-format-btn:hover {
  border-color: #0091af;
  background: rgba(0, 145, 175, 0.02);
}

.export-format-btn.active {
  border-color: #0091af;
  background: rgba(0, 145, 175, 0.08);
}

.export-format-label {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.export-format-btn.active .export-format-label {
  color: #0091af;
}

.export-format-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #f8fafc;
}

.export-format-btn.disabled .export-format-label {
  color: #94a3b8;
}

/* Format Notice */
.export-format-notice {
  display: none;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}

.export-format-notice.visible {
  display: flex;
}

.export-format-notice-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #d97706;
}

.export-format-notice-icon svg {
  width: 100%;
  height: 100%;
}

/* Export Footer */
.export-footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.export-summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

.export-summary-count {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.export-summary-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 11px;
  color: #64748b;
}

.export-summary-email svg {
  width: 14px;
  height: 14px;
}

.export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-btn.primary {
  background: linear-gradient(135deg, #0091af 0%, #007a94 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 145, 175, 0.3);
}

.export-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #007a94 0%, #006578 100%);
  box-shadow: 0 4px 12px rgba(0, 145, 175, 0.4);
  transform: translateY(-1px);
}

.export-btn.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 145, 175, 0.3);
}

.export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.export-btn.loading {
  opacity: 0.7;
}

.export-btn-icon {
  width: 18px;
  height: 18px;
}

.export-btn-icon svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Sidebar Ads Widget
   ========================================================================== */

.sidebar-ads-container {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0.5rem;
  box-sizing: border-box;
}

/* Override default placements-widget sticky positioning for sidebar context */
/* Ads should scroll with content, not remain fixed */
.sidebar-ads-container.placements-widget {
  position: relative !important;
  top: 0 !important;
  z-index: 1;
  aspect-ratio: 700 / 115;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin: 0;
}

/* Hide ads container when empty or errored */
.sidebar-ads-container:empty {
  display: none;
  padding: 0;
}

/* ==========================================================================
   MOBILE BOTTOM SHEET STYLES

   On mobile screens (max-width: 768px), the UnifiedSidebar transforms from
   a left-side panel into a bottom sheet that can be dragged up/down.

   States (controlled via data-sheet-state attribute on #unified-sidebar):
   - "peek": Shows only the drag handle and layer tabs (80px)
   - "half": Shows scrollable content up to 50% of screen
   - "full": Expanded to near full screen (90vh)

   The bottom sheet slides over the map and can be swiped to change states.
   ========================================================================== */

@media (max-width: 768px) {
  /* ==========================================================================
     CSS Variables for Mobile Bottom Sheet
     ========================================================================== */
  :root {
    --sheet-peek-height: 32px; /* Just the drag handle */
    --sheet-half-height: 50dvh; /* Use dvh to account for mobile browser chrome */
    --sheet-full-height: calc(100dvh - 56px); /* Full height minus mobile nav header */
    --sheet-handle-height: 32px;
    /* Spring-like easing for natural feel (similar to iOS/Airbnb) */
    --sheet-transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --sheet-border-radius: 16px;
  }

  /* ==========================================================================
     Transform Sidebar to Bottom Sheet
     ========================================================================== */
  #unified-sidebar {
    /* Reset desktop positioning */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    /* Full width on mobile */
    width: 100% !important;
    max-width: 100% !important;

    /* Height controlled by state */
    height: var(--sheet-peek-height);
    max-height: var(--sheet-full-height);

    /* Visual styling */
    border-right: none;
    border-top: 1px solid var(--sidebar-border);
    border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    /* Smooth transitions - only height since panel is bottom-anchored */
    transition: height var(--sheet-transition);

    /* Ensure it's above the map */
    z-index: 1000;

    /* Allow overscroll at edges */
    overscroll-behavior: contain;
  }

  /* State: Peek (default) - shows only drag handle */
  #unified-sidebar[data-sheet-state="peek"] {
    height: var(--sheet-peek-height);
    overflow: hidden;
  }

  /* Hide all content except drag handle in peek state */
  #unified-sidebar[data-sheet-state="peek"] #sidebar-views-container {
    visibility: hidden;
    opacity: 0;
  }

  /* State: Half expanded */
  #unified-sidebar[data-sheet-state="half"] {
    height: var(--sheet-half-height);
  }

  /* State: Full expanded */
  #unified-sidebar[data-sheet-state="full"] {
    height: var(--sheet-full-height);
  }

  /* Ensure content is visible when not in peek state */
  #unified-sidebar[data-sheet-state="half"] #sidebar-views-container,
  #unified-sidebar[data-sheet-state="full"] #sidebar-views-container {
    visibility: visible;
    opacity: 1;
  }

  /* Content/detail views should respect sheet state, not override it */
  #unified-sidebar.view-content,
  #unified-sidebar.view-details {
    width: 100% !important;
  }

  /* ==========================================================================
     Drag Handle
     ========================================================================== */
  #sidebar-drag-handle {
    display: flex !important;
    width: 100%;
    height: var(--sheet-handle-height);
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    background: transparent;
    flex-shrink: 0;
  }

  #sidebar-drag-handle:active {
    cursor: grabbing;
  }

  #sidebar-drag-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }

  /* Increase touch target for drag handle */
  #sidebar-drag-handle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
  }

  /* ==========================================================================
     Hide Desktop-Only Elements
     ========================================================================== */
  /* Hide the side toggle button on mobile */
  #sidebar-toggle {
    display: none !important;
  }

  /* ==========================================================================
     Mobile Sidebar Structure
     ========================================================================== */
  #sidebar-views-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Allow shrinking */
    overflow: hidden;
    border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
  }

  /* Layers view - flex column so tools stay at bottom */
  #sidebar-view-layers.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Layers scroll wrapper - scrollable container for layers view content */
  #sidebar-layers-scroll-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Hide section headers on mobile - tabs are self-explanatory */
  .sidebar-section-header {
    display: none !important;
  }

  /* Search section - more compact on mobile with visible border */
  #sidebar-search {
    flex: 0 0 auto !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    margin-bottom: 0.25rem !important;
  }

  /* Searchbar input styling */
  #sidebar-searchbar .autocomplete-searchbar-widget-input {
    height: 40px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 0.5rem 2.5rem 0.5rem 2.5rem !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
  }

  #sidebar-searchbar .autocomplete-searchbar-widget-input:focus {
    background: #fff !important;
    border-color: var(--color-blue) !important;
  }

  /* Fix search icon alignment */
  #sidebar-searchbar .fa.fa-search {
    height: 40px !important;
    line-height: 40px !important;
    width: 2.5rem !important;
    font-size: 14px !important;
  }

  /* Fix clear button alignment */
  #sidebar-searchbar .input-icon.clear-btn {
    height: 40px !important;
    line-height: 40px !important;
    width: 2.5rem !important;
  }

  /* Dropdown should span full width */
  #sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-wrapper {
    left: -0.75rem !important;
    right: -0.75rem !important;
    width: auto !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Larger touch targets for suggestion items */
  #sidebar-searchbar .autocomplete-searchbar-widget-autocomplete-item,
  #sidebar-searchbar .autocomplete-searchbar-widget-grouped-item {
    padding: 14px 16px !important;
    min-height: 48px !important;
  }

  /* Category headers also need more space */
  #sidebar-searchbar .autocomplete-searchbar-widget-category-header {
    padding: 10px 16px !important;
  }

  /* Recent searches label */
  #sidebar-searchbar .autocomplete-searchbar-widget-recent-header {
    padding: 10px 16px !important;
  }

  /* ==========================================================================
     Mobile Layers Panel - Vertical List Layout (like desktop)
     ========================================================================== */

  /* Layers section - scrollable vertical list, shrinks to fit */
  #sidebar-layers {
    flex: 1 1 0 !important; /* Can shrink to 0 */
    min-height: 100px !important; /* But keep at least 100px for usability */
    overflow: hidden !important;
    padding: 0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Layer list as vertical scrollable list */
  #sidebar-layer-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 0 !important;
    padding: 0.5rem !important;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Layer items as full-width rows */
  .sidebar-layer-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border-bottom: none !important;
    pointer-events: auto !important;
  }

  .sidebar-layer-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  .sidebar-layer-item.visible {
    background: rgba(0, 145, 175, 0.06) !important;
  }

  .sidebar-layer-item.visible:hover {
    background: rgba(0, 145, 175, 0.1) !important;
  }

  /* Main row layout - horizontal with icon, label, toggle */
  .sidebar-layer-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Restore inner div normal layout */
  .sidebar-layer-main > div[style] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Layer icon - normal size for mobile */
  .sidebar-layer-item .sidebar-layer-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .sidebar-layer-item .sidebar-layer-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Show layer labels with proper styling */
  .sidebar-layer-item .sidebar-layer-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    padding-left: 0.25rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Show visibility toggle on mobile */
  .sidebar-layer-item .sidebar-layer-toggle {
    display: flex !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Checkbox styling for mobile */
  .sidebar-layer-toggle input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* Show symbology toggle button */
  .layer-symbology-toggle {
    display: flex !important;
    padding: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .symbology-chevron {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Symbology expandable section */
  .layer-symbology {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 200ms ease, padding 200ms ease !important;
    padding: 0 !important;
    margin: 0 0.5rem !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-radius: 6px !important;
  }

  .sidebar-layer-item.symbology-expanded .layer-symbology {
    grid-template-rows: 1fr !important;
    padding: 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }

  .layer-symbology > div {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Symbology items */
  .symbology-item {
    padding: 0.25rem 0 !important;
    font-size: 13px !important;
  }

  /* Show lock icon for premium layers */
  .sidebar-layer-lock {
    display: flex !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  /* Visibility indicator dot - hide on mobile since we have checkbox */
  .sidebar-layer-icon::after {
    display: none !important;
  }

  /* ==========================================================================
     Tool Bar at Bottom of Sheet
     ========================================================================== */
  #sidebar-tools {
    flex: 0 0 auto !important;
    margin-top: auto;
    border-top: 1px solid var(--sidebar-border);
    border-bottom: none !important;
    padding: 0 !important;
  }

  #sidebar-tool-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around;
    padding: 0.5rem;
    background: var(--sidebar-bg-solid);
    flex-shrink: 0;
  }

  .sidebar-tool-item {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    gap: 0.25rem !important;
    border-radius: 8px !important;
    background: transparent !important;
  }

  /* Unwrap inner div in tool item */
  .sidebar-tool-item > div {
    display: contents;
  }

  .sidebar-tool-item .sidebar-tool-label {
    display: block !important;
    font-size: 10px;
    opacity: 0.8;
    text-align: center;
  }

  .sidebar-tool-item .sidebar-tool-icon {
    width: 24px;
    height: 24px;
  }

  /* Hide tooltips on mobile - they don't work well with touch */
  .sidebar-tooltip {
    display: none !important;
  }

  /* Hide sponsor widget on mobile - space is too limited */
  .sidebar-sponsor-widget {
    display: none !important;
  }

  /* ==========================================================================
     Content Area
     ========================================================================== */
  .sidebar-view {
    /* Reset desktop absolute positioning for mobile flex layout */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* Hide non-active views */
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .sidebar-view.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden; /* Children will handle scrolling */
  }

  /* Content view fills remaining space */
  #sidebar-view-content.active {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }

  /* Content header with back button and title */
  #sidebar-content-header {
    flex-shrink: 0;
  }

  /* Loading indicator */
  #sidebar-content-loading {
    flex-shrink: 0;
  }

  /* Scroll wrapper - this is the flex child that needs to grow */
  #sidebar-content-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent pull-to-refresh interference */
    touch-action: pan-y; /* Allow vertical scrolling, enable gesture detection */
  }

  /* Content list inside scroll wrapper */
  #sidebar-content-list {
    padding-bottom: 1rem;
  }

  /* Content filters row - more compact on mobile */
  #sidebar-content-filters {
    padding: 0.5rem;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  #sidebar-content-search-wrapper input {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  /* ==========================================================================
     Filter Panel on Mobile
     ========================================================================== */
  #sidebar-filter-content {
    max-height: 200px;
    overflow-y: auto;
  }

  /* Filter toggle button more prominent */
  #sidebar-filter-toggle {
    background: var(--color-bg-hover);
  }

  /* ==========================================================================
     Details View on Mobile
     ========================================================================== */
  #sidebar-view-details.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Children handle scrolling */
  }

  /* Details header fixed at top */
  #sidebar-details-header {
    flex-shrink: 0 !important;
    position: relative !important; /* Remove sticky on mobile - use flex instead */
    z-index: 10;
    background: var(--sidebar-bg-solid);
    border-bottom: 1px solid var(--sidebar-border);
  }

  /* Loading state */
  #sidebar-details-loading {
    flex-shrink: 0;
  }

  /* Scroll wrapper takes remaining space */
  #sidebar-details-scroll-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent pull-to-refresh interference */
    touch-action: pan-y; /* Allow vertical scrolling, enable gesture detection */
  }

  #sidebar-details-content {
    padding-bottom: 2rem;
  }

  /* ==========================================================================
     Filters View on Mobile
     ========================================================================== */
  #sidebar-view-filters.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Children handle scrolling */
  }

  #sidebar-filters-header {
    flex-shrink: 0 !important;
  }

  #sidebar-filters-scroll-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  #sidebar-filters-actions {
    flex-shrink: 0 !important;
  }

  /* ==========================================================================
     Help View on Mobile
     ========================================================================== */
  #sidebar-view-help.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #sidebar-help-header {
    flex-shrink: 0 !important;
  }

  #sidebar-help-scroll-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* ==========================================================================
     Download View on Mobile
     ========================================================================== */
  #sidebar-view-download.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #sidebar-download-header {
    flex-shrink: 0 !important;
  }

  #sidebar-download-scroll-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Ensure all tab content wrappers allow scrolling properly */
  #sidebar-details-content .tab-content-wrapper {
    overflow: visible !important;
  }

  /* Company tab specific - ensure stock chart doesn't break scroll */
  #sidebar-details-content .tab-content-wrapper[data-tab="Company"] {
    overflow: visible !important;
  }

  #sidebar-details-content .panel-stocks-section {
    flex-shrink: 0;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    flex-direction: column;
  }

  #sidebar-details-content .qm-stock-chart-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tabs row - make horizontally scrollable on mobile */
  #sidebar-details-content .tabs-wrapper {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem !important;
    gap: 0.375rem !important;
  }

  /* Hide scrollbar but keep functionality */
  #sidebar-details-content .tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  #sidebar-details-content .tabs-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Smaller tabs on mobile */
  #sidebar-details-content .tabs-wrapper .tab {
    padding: 0.375rem 0.75rem !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Details panel content - tighter spacing on mobile */
  #sidebar-details-content .panel-body {
    padding: 0.75rem !important;
  }

  #sidebar-details-content .panel-subsection {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  #sidebar-details-content .subsection-header {
    font-size: 13px !important;
    margin-bottom: 0.5rem !important;
  }

  #sidebar-details-content .panel-section-header {
    font-size: 14px !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* ==========================================================================
     Mobile: Social Links Section
     ========================================================================== */
  #sidebar-details-content .panel-socials-section {
    margin-top: 1rem;
    padding-top: 0.75rem;
  }

  #sidebar-details-content .social-link-item {
    padding: 0.375rem 0.625rem;
    font-size: 12px;
  }

  #sidebar-details-content .social-link-item .social-icon {
    width: 16px;
    height: 16px;
  }

  /* Table cells - smaller text and padding */
  #sidebar-details-content table td {
    padding: 0.375rem !important;
    font-size: 12px !important;
  }

  #sidebar-details-content .project-basic-details-cell.header-cell {
    width: 35% !important;
    font-size: 11px !important;
  }

  /* News cards - more compact */
  #sidebar-details-content .sources-list-item-wrapper {
    padding: 0.625rem !important;
  }

  #sidebar-details-content .card-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  #sidebar-details-content .news-card-description {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Reports section - smaller items */
  #sidebar-details-content .report-item {
    padding: 0.5rem !important;
  }

  #sidebar-details-content .report-item a .card-title {
    font-size: 12px !important;
  }

  /* No data message */
  #sidebar-details-content .tab-content-no-data {
    font-size: 13px !important;
    padding: 1.5rem !important;
  }

  /* ==========================================================================
     Search on Mobile
     ========================================================================== */
  #sidebar-search-section {
    padding: 0.5rem;
  }

  #sidebar-search-input {
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* ==========================================================================
     Landscape Orientation
     ========================================================================== */
  @media (orientation: landscape) and (max-height: 500px) {
    :root {
      --sheet-peek-height: 32px; /* Just the drag handle */
      --sheet-half-height: 60dvh;
      --sheet-full-height: calc(100dvh - 56px); /* Account for mobile nav header */
    }

    /* Compact vertical layout in landscape */
    #sidebar-layer-list {
      padding: 0.25rem 0.5rem;
    }

    .sidebar-layer-item {
      min-height: 36px !important;
    }

    .sidebar-layer-main {
      min-height: 36px !important;
      padding: 0.25rem 0.5rem !important;
    }

    .sidebar-layer-item .sidebar-layer-label {
      font-size: 12px !important;
    }

    .sidebar-layer-item .sidebar-layer-icon {
      width: 28px !important;
      height: 28px !important;
    }
  }

  /* ==========================================================================
     Safe Area Insets (notch/home indicator)
     ========================================================================== */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    #unified-sidebar {
      padding-bottom: env(safe-area-inset-bottom);
    }

    #sidebar-tool-list {
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
  }
}

/* ==========================================================================
   Mobile Page Layout Fixes
   Ensure the main page elements display correctly when sidebar is bottom sheet
   ========================================================================== */
@media (max-width: 768px) {
  /* Ensure body/html take full height */
  html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  /* Main element should fill available space (body > main to avoid affecting nested main elements like QMod widget) */
  body > main {
    position: fixed !important;
    top: var(--nav-height, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden;
  }

  /* Map container fills the main area */
  #map-container {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
  }

  /* Map itself fills the container */
  #map {
    width: 100% !important;
    height: 100% !important;
  }

  /* Dashboard/overlay container shouldn't block map */
  #dashboard {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
  }

  #dashboard > * {
    pointer-events: auto;
  }

  /* Dashboard panel needs to be visible to show UnifiedSidebar, but shouldn't block interactions */
  #dashboard-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
  }

  /* Allow pointer events on the UnifiedSidebar itself */
  #dashboard-panel > #unified-sidebar {
    pointer-events: auto;
  }

  /* Hide old dashboard segment content on mobile */
  #dashboard-segment-right {
    display: none !important;
  }

  /* Zoom controls positioning for mobile */
  #map-zoom-controls {
    top: 10px;
    right: 10px;
    z-index: 100;
  }

  /* Hide old bottom container on mobile */
  #bottom-container {
    display: none !important;
  }

  /* Footer adjustments for mobile */
  #footer {
    display: none !important;
  }
}

/* ==========================================================================
   Drag Handle - Hidden on Desktop, Shown on Mobile
   ========================================================================== */
#sidebar-drag-handle {
  display: none;
}

/* ==========================================================================
   Sheet State Transitions - Disable during active drag
   ========================================================================== */
#unified-sidebar.dragging {
  transition: none !important;
  will-change: height;
}

#unified-sidebar.dragging * {
  pointer-events: none !important;
}

/* Allow drag handle to receive events during drag */
#unified-sidebar.dragging #sidebar-drag-handle {
  pointer-events: auto !important;
}

/* Disable transitions when explicitly requested */
#unified-sidebar.no-transition {
  transition: none !important;
}