/* ========================================
   TAB OVERLAY SYSTEM
   ======================================== */

/* Tab banner - sits in white space at top of content area */
.tab-overlay {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  /* Space tabs evenly across container */
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  /* Reduced 20% from 10px 12px */
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* Individual tab button - smaller to fit 5 tabs */
.tab-btn {
  width: 66px;
  /* Fixed width to match action buttons */
  background: #F0FFF0;
  /* Honeydew green for unselected tabs */
  border: 2px solid #e5e7eb;
  padding: 6px 3px;
  /* Reduced 20% from 8px 4px */
  border-radius: 12px;
  /* Match menu icon style */
  border-bottom-left-radius: 12px;
  /* Specific corner radius */
  font-size: 11px;
  font-weight: 700;
  /* Increased from 600 */
  color: #000;
  /* Black text for unselected tabs */
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* Reduced 20% from 4px */
  text-align: center;
  box-shadow: -1.5px 1.5px 0 #000000;
  /* 3D effect for all tabs */
}

.tab-btn:hover {
  background: #f5f5f5;
  border-color: #cbd5e1;
}

/* Active state - color matches marker type */
.tab-btn.active {
  color: #fff !important;
  /* White text for all active tabs */
  border: 0.5px solid #000;
  /* Black border */
  border-bottom-left-radius: 12px;
  box-shadow: -1.5px 1.5px 0 #000000;
}

/* Ensure child spans also get white text */
.tab-btn.active .tab-line-1,
.tab-btn.active .tab-line-2 {
  color: #fff !important;
}

/* Nearby Incidents - Firebrick Red (brand color) */
.tab-btn[data-tab="nearby"] {
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn[data-tab="nearby"].active {
  background: #B22222;
  /* Firebrick Red */
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

/* Civic Activity - Orange */
.tab-btn[data-tab="civic"] {
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn[data-tab="civic"].active {
  background: #F28C28;
  /* Orange */
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

/* My Community - Steel Blue */
.tab-btn[data-tab="groups"] {
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn[data-tab="groups"].active {
  background: #4682B4;
  /* Steel Blue */
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

/* My Zones - Cadet Blue */
.tab-btn[data-tab="zones"] {
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn[data-tab="zones"].active {
  background: #5F9EA0;
  /* Cadet Blue */
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

/* My People - Purple */
.tab-btn[data-tab="circle"] {
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn[data-tab="circle"].active {
  background: #7F00FF;
  /* Purple */
  border-top-left-radius: 6px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
}

.tab-btn .tab-line-1 {
  font-size: 11px;
  font-weight: 750;
  /* Reduced by 50 from 800 */
  line-height: 1.2;
  display: block;
}

.tab-btn .tab-line-2 {
  font-size: 11px;
  font-weight: 650;
  /* Reduced by 50 from 700 */
  line-height: 1.2;
  display: block;
}

/* Responsive Text Helpers */
.mobile-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.desktop-text {
  display: none;
  /* Hidden by default (mobile first) */
  font-weight: 700;
  white-space: nowrap;
}

/* My Community tab - slightly wider for long word */
.tab-btn[data-tab="groups"] {
  max-width: 70px;
}

/* Content area below map - scrolls UP over sticky map - ONLY when no drawer is open */
body:not(.drawer-open) .content-area {
  position: relative;
  min-height: calc(100vh - 68vh);
  /* At least fill remaining viewport */
  background: #fff;
  z-index: 1001;
  /* Above map when scrolling up */
  padding-top: 0;
  /* No padding - tabs are now inside */
  border-radius: 12px 12px 0 0;
  /* Rounded top corners */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow to emphasize rounded corners */
  /* Ensure child elements respect border-radius */
}

/* Hide content area when drawer is open */
body.drawer-open .content-area {
  display: none;
}

/* Add more content below to enable scrolling */

/* Horizontal card scroll section */
.card-scroll-section {
  overflow-x: auto;
  overflow-y: hidden;
  height: 120px;
  /* Fixed height - always stays same regardless of content */
  padding: 12px 10px;
  background-color: #F0FFF0;
  /* ACT 1: Honeydew background with wallpaper overlay (simulating 15% opacity) */
  background-image: linear-gradient(rgba(240, 255, 240, 0.85), rgba(240, 255, 240, 0.85)), url('/assets/patterns/hero-wallpaper.svg');
  background-repeat: repeat;
  background-size: 600px 600px;
  border-top: 1px solid #e5e7eb;
  /* border-bottom: 1px solid #e5e7eb; - REMOVED per user request */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.card-scroll-container {
  display: flex;
  gap: 12px;
  height: 100%;
  /* Fill the fixed 120px */
}

/* Individual horizontal card */
.horizontal-card {
  flex: 0 0 260px;
  width: 260px;
  /* Fixed width - Act 1 standardization */
  height: 100px;
  /* Fixed 100px to fit in 120px section (10px padding top/bottom) */
  background: #f9fafb;
  /* ACT 1: Grey background to match My Hub */
  border: 1.5px solid transparent;
  /* ACT 1: Default transparent border, specific types override color */
  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.6);
  /* ACT 1: Match CTA button shadow */
  border-radius: 12px;
  /* ACT 1: Match My Hub radius */
  padding: 12px;
  /* ACT 1: Match My Hub padding */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.horizontal-card:hover {
  transform: translateY(-2px);
  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.7);
}

/* Specific Card Types - Full Border Colors */
.incident-card {
  border-color: #B22222 !important;
}

.civic-card {
  border-color: #F28C28 !important;
}

.petition-card {
  border-color: #2F4F4F !important;
}

.group-card {
  border-color: #4682B4 !important;
}

.zone-card {
  border-color: #5F9EA0 !important;
}

.circle-card {
  border-color: #7F00FF !important;
}

/* Member card specific styles - Life360 lite vibe with large photo */
.horizontal-card.member-card {
  border-color: #7F00FF !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.horizontal-card.member-card.card-selected-glow {
  border-color: #1E90FF !important;
}

.member-card-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 5px 10px;
  justify-content: flex-start;
}

.member-card-photo {
  width: 75px;
  height: 75px;
  /* Circular avatar matching stacked style */
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #F0F0FF;
  /* Light purple background for placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.member-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-card-photo svg {
  width: 70%;
  height: 70%;
}

.member-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-width: 0;
  /* Allow text truncation */
  padding: 8px 12px 8px 0;
}

.member-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.member-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 12px;
}

.member-card-circle {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-top: 8px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 4px;
}

.member-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.member-card-status-text {
  font-size: 11px;
  font-weight: 600;
  color: #7F00FF;
  text-transform: uppercase;
}

/* Placeholder card - wider since it's the only card in empty state */
.horizontal-card.teaser-placeholder {
  flex: 0 0 calc(100vw - 44px);
  /* Full width minus padding and scrollbar */
  max-width: 600px;
  /* Cap width for readability */
  height: 100px;
  /* Match regular cards - fixed height */
  padding: 10px;
  cursor: pointer;
  /* Now clickable */
  margin: 0 auto;
  /* Center the placeholder card */
  border: 1.5px solid #1E90FF !important;
  /* Dodger blue border for all placeholders */
  display: flex;
  flex-direction: column;
  /* Stack content vertically to properly space footer */
  position: relative;
  /* Enable absolute positioning for footer icon */
}

.horizontal-card.teaser-placeholder:hover {
  transform: translateY(-2px);
  /* Add hover effect like other cards */
  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.7);
  /* Enhanced shadow on hover */
}

/* Teaser strip */
.teaser-strip {
  min-height: 80px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  /* Green gradient */
  box-shadow: 0 4px 0 #15803d;
  /* Dark green 3D effect */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center content */
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.teaser-strip:hover {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  transform: translateY(2px);
  box-shadow: 0 2px 0 #15803d;
  /* Compress 3D effect on hover */
}

.teaser-content {
  flex: 1;
  text-align: center;
  /* Center text */
}

.teaser-title {
  font-size: 24px;
  /* Larger for "My Hub" */
  font-weight: 800;
  margin-bottom: 0;
  /* Remove bottom margin */
}

.teaser-subtitle {
  display: none;
  /* Hide subtitle */
}

.teaser-arrow {
  display: none;
  /* Hide arrow */
}

/* Hide webkit scrollbar for cleaner look (optional) */
.card-scroll-section::-webkit-scrollbar {
  height: 6px;
}

.card-scroll-section::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.card-scroll-section::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Footer override - ensure it stays above all content */
.wb-footer-nav {
  z-index: 1003 !important;
  /* Above content area (1001) and tabs (1002) */
}

/* Menu button override - match map overlay icons */
.menu-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 0.5px solid #000 !important;
  /* Match recenter/search */
}

/* Map overlay mini icons - 38px uniform sizing */
.map-overlay-icon {
  position: fixed;
  /* Fixed to viewport - stays above all content */
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.2s ease;
  z-index: 1004;
  /* Above footer (1003), tabs (1002), content (1001), map (999) */
  box-sizing: border-box;
}

.map-overlay-icon:hover {
  background: #f5f5f5;
}

.map-overlay-icon:active {
  transform: scale(0.98);
}

.map-overlay-icon svg {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px;
  min-height: 19px;
  fill: #000;
}


/* Bottom-left: Search (positioned at map bottom-left) - ONLY when no drawer is open */
body:not(.drawer-open) .map-overlay-icon.bottom-left {
  bottom: calc(30vh + 12px);
  /* 30vh content preview + 12px spacing */
  left: 12px;
}

/* Map search expandable container - ONLY when no drawer is open */
body:not(.drawer-open) .map-search-container {
  position: fixed;
  bottom: calc(32vh + 12px);
  right: 12px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1005;
  /* Above content area (1001) and footer (1003) */
}

.map-search-input {
  width: 0;
  opacity: 0;
  border: 0.5px solid #000;
  border-radius: 6px;
  padding: 0;
  margin-right: 8px;
  font-size: 13px;
  height: 38px;
  background: #fff;
  transition: all 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
}

.map-search-container.expanded .map-search-input {
  width: 260px;
  opacity: 1;
  padding: 0 12px;
  pointer-events: auto;
}

.map-search-input:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.map-search-container .map-overlay-icon {
  position: relative;
  flex-shrink: 0;
  border-width: 0.5px;
}

/* Google Places Autocomplete dropdown - force above content area */
.pac-container {
  z-index: 1006 !important;
  /* Above search container (1005) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 6px;
  margin-top: 4px;
}

/* Recenter button (target icon) - thinner border - ONLY when no drawer is open */
body:not(.drawer-open) #recenterBtn {
  position: fixed;
  bottom: calc(32vh + 12px + 38px + 8px);
  /* Above search with 8px gap (moved down 4px total) */
  right: 12px;
  border-width: 0.5px;
}

/* Right stack: Share/Messages/Install (below menu button) */
.map-overlay-icon.right-stack {
  right: 12px;
  border-width: 0.5px;
  /* Match recenter/search border thickness */
}

.map-overlay-icon.right-stack-1 {
  top: 64px;
  /* Menu(14px) + 38px + 12px gap */
}

.map-overlay-icon.right-stack-2 {
  top: 114px;
  /* Comments(64px) + 38px + 12px gap */
}

.map-overlay-icon.right-stack-3 {
  top: 164px;
  /* Share(114px) + 38px + 12px gap */
}

/* Notification badge */
.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-sizing: border-box;
}

/* Placeholder body text - responsive versions */
/* Desktop: show desktop version by default */
.placeholder-body-desktop {
  display: -webkit-box !important;
}

.placeholder-body-mobile {
  display: none !important;
}

/* Desktop: reduce width to tighten spacing */
@media (min-width: 769px) {
  .horizontal-card.teaser-placeholder {
    max-width: 480px;
    /* Reduced by 120px from 600px */
  }
}

/* Mobile: swap to mobile version */
@media (max-width: 768px) {
  .placeholder-body-desktop {
    display: none !important;
  }

  .placeholder-body-mobile {
    display: -webkit-box !important;
  }
}