/* Custom Responsive Overrides for SolarOS */

@media (max-width: 1023px) {
  /* Prevent horizontal scrollbars from off-screen animations */
  html, body, #root, main {
    overflow-x: hidden !important;
    width: 100%;
  }

  /* Scale down headings to fit mobile/tablet viewports nicely */
  .text-7xl {
    font-size: 3.25rem !important; /* 52px */
    line-height: 1.05 !important;
  }
  .text-6xl {
    font-size: 2.5rem !important; /* 40px */
    line-height: 1.1 !important;
  }
  .text-5xl {
    font-size: 2rem !important; /* 32px */
    line-height: 2.25rem !important;
  }
  .text-4xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
  }
  .text-3xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.6rem !important;
  }

  /* Reset horizontal animation for feature cards into clean vertical fade-ins */
  .feature-card {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .feature-card:not(.is-visible) {
    transform: translateY(20px) !important;
    opacity: 0 !important;
  }
  .feature-card.is-visible {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }

  /* Disable inline 3D translations on stacked mobile cards */
  .layer-3d {
    transform: none !important;
  }

  /* Enable horizontal scrolling for comparison table */
  .comparison-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent columns from squeezing to unreadable widths */
  .comparison-table-row {
    min-width: 640px !important;
  }

  /* Target the stacked third dashboard column (Efficiency column) for proper padding and borders */
  .grid.lg\:grid-cols-\[1fr_1fr_280px\] > div:nth-child(2) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 639px) {
  /* Scale down headings even more on small mobile screens (< 640px) */
  .text-7xl {
    font-size: 2rem !important; /* 32px */
    line-height: 1.1 !important;
  }
  .text-6xl {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.1 !important;
  }
  .text-5xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.8rem !important;
  }
  .text-4xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.6rem !important;
  }
  .text-3xl {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4rem !important;
  }

  /* Stack buttons vertically and center them on small mobile screens */
  .btn-amber, .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  /* Clean vertical stacking of dashboard widgets */
  .dashboard-anomaly-card {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 1.5rem !important; /* pt-6 spacing */
    border-top: 1px solid hsl(var(--border) / 0.6) !important;
  }

  /* Align Power Output Today column (first child of inner grid) on mobile */
  .grid.lg\:grid-cols-\[1fr_1fr_280px\] .grid.md\:grid-cols-2 > div:first-child {
    padding-right: 0 !important;
    padding-bottom: 1.5rem !important;
  }
}

/* Tablet viewport: restore top border and padding on stacked third column */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid.lg\:grid-cols-\[1fr_1fr_280px\] > div:nth-child(2) {
    border-top: 1px solid hsl(var(--border) / 0.6) !important;
    padding-top: 1.5rem !important;
  }
}

/* Small mobile: stack dashboard header components vertically */
@media (max-width: 639px) {
  .rounded-2xl.glass:not(.comparison-table-container) > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Very small mobile: stack efficiency dial and stats vertically */
@media (max-width: 479px) {
  .grid.lg\:grid-cols-\[1fr_1fr_280px\] div.flex.items-center.gap-5 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
}

/* Contain marquee horizontal overflow layout container */
.relative:has(> .animate-marquee) {
  overflow: hidden !important;
}


/* Style for Team Section member avatars */
.team-avatar-container {
  width: 110px !important;
  height: 110px !important;
  border-radius: 9999px !important; /* Perfect circle */
  overflow: hidden !important;
  border: 1px solid hsl(var(--border) / 0.6) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.team-avatar-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.group:hover .team-avatar-container img {
  transform: scale(1.06) !important;
}

/* Scrollable container for team carousel */
.team-scroll-container {
  display: flex !important;
  gap: 1.5rem !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important; /* Firefox */
  padding: 0.5rem 0.25rem 1.5rem 0.25rem !important; /* Add bottom padding for card shadow hover */
}
.team-scroll-container::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

/* Card item inside team carousel */
.team-card {
  flex-shrink: 0 !important;
  width: 100% !important;
  scroll-snap-align: start !important;
}

@media (min-width: 768px) {
  .team-card {
    width: calc(50% - 12px) !important;
  }
}

@media (min-width: 1024px) {
  .team-card {
    width: calc(33.333% - 16px) !important;
  }
}

/* Style for Team Section member initials placeholders */
.team-avatar-placeholder {
  width: 110px !important;
  height: 110px !important;
  border-radius: 9999px !important;
  border: 1px solid hsl(var(--border) / 0.6) !important;
  background: linear-gradient(135deg, hsl(var(--cyan) / 0.08), hsl(var(--amber) / 0.08)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono), monospace !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: hsl(var(--amber)) !important;
  text-shadow: 0 0 10px hsl(var(--amber) / 0.3) !important;
  flex-shrink: 0 !important;
}