/* GLOBAL SCROLLBAR HIDING - Applied to all elements */
* {
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

*::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Ensure body and html never show scrollbars */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Hide scrollbars on root container */
#root {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#root::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Basic style overrides for Dashboard */

/* Font defaults */
body {
  font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  color: #EEEEEE;
  background-color: #1B1B1B;
  background-image: url('./assets/dashboard-bg.png') !important; /* ✅ Add this */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}


/* Set default text color and hide scrollbars globally */
* {
  box-sizing: border-box;
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

*::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Ensure body and html never show scrollbars */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Hide scrollbars on root container */
#root {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#root::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Remove focus outlines */
*:focus {
  outline: none;
}

/* Remove metrics box (only preserved for backward compatibility) */
[data-testid*="metrics"],
[data-testid="risk-stats"] {
  display: none;
}

/* OVERRIDE CSS */
.root {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

/* Enhanced animations for account transitions - use very subtle effect */
.dashboard-container.transitioning {
  animation: subtle-fade 0.8s ease-in-out;
}

@keyframes subtle-fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.97;
  }
  100% {
    opacity: 1;
  }
}

/* Apply transitions to ALL text elements */
.MuiTypography-root,
span,
p,
label,
h1, h2, h3, h4, h5, h6 {
  transition: opacity 0.4s ease-in-out !important;
}

.dashboard-container.transitioning .MuiTypography-root,
.dashboard-container.transitioning span,
.dashboard-container.transitioning p,
.dashboard-container.transitioning label,
.dashboard-container.transitioning h1,
.dashboard-container.transitioning h2,
.dashboard-container.transitioning h3,
.dashboard-container.transitioning h4,
.dashboard-container.transitioning h5,
.dashboard-container.transitioning h6 {
  transition: opacity 0.5s ease-in-out !important;
}

/* CSS animations for values */
.animated-value {
  display: inline-block;
  animation: smooth-fade 0.6s ease-in-out forwards;
}

@keyframes smooth-fade {
  0% { 
    opacity: 0.2;
  }
  100% { 
    opacity: 1;
  }
}

/* Animations for switching between accounts - icons should only fade, not scale */
.MuiSvgIcon-root {
  transition: opacity 0.4s ease-in-out !important;
}

.dashboard-container.transitioning .MuiSvgIcon-root {
  transition: opacity 0.5s ease-in-out !important;
}

/* No scaling on icons */
.metrics-panel-item .MuiSvgIcon-root {
  transition: opacity 0.4s ease-in-out !important;
  transform: none !important;
}

/* Custom animations for equity display components - fade only */
.equity-display-container {
  transition: opacity 0.5s ease-in-out !important;
}

/* Ensure equity ring transitions smoothly */
.equity-ring-container,
.equity-display-container * {
  transition: opacity 0.4s ease-in-out !important;
}

/* Specific transitions for equity labels and values */
.dashboard-container.transitioning .TotalEquityLabel,
.dashboard-container.transitioning .EquityStatLabel,
.dashboard-container.transitioning .TotalEquityAmount,
.dashboard-container.transitioning .EquityStatValue {
  transition: opacity 0.5s ease-in-out !important;
}

/* Staggered transitions for equity stats */
.dashboard-container.transitioning .EquityStatItem:nth-child(1) {
  transition-delay: 0.05s !important;
}
.dashboard-container.transitioning .EquityStatItem:nth-child(2) {
  transition-delay: 0.1s !important;
}

/* Make the text transitions even smoother */
.animated-text-container {
  position: relative;
  overflow: hidden;
}

/* Account selector transitions */
.MuiCardContent-root, 
.MuiCard-root {
  transition: opacity 0.35s ease-in-out;
}

.dashboard-container.transitioning .MuiCardContent-root,
.dashboard-container.transitioning .MuiCard-root {
  transition: opacity 0.5s ease-in-out;
}

/* Special transitions for metric panels - fade only, no transform */
.metrics-panel-item {
  transition: opacity 0.4s ease-in-out !important;
}

.dashboard-container.transitioning .metrics-panel-item {
  animation: metric-smooth-fade 0.7s ease-in-out;
}

@keyframes metric-smooth-fade {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* Override any transform styles that might be causing scaling */
.dashboard-container.transitioning * {
  transform: none !important;
}

/* Additional fade effects for specific components */
.dashboard-container.transitioning .MuiBox-root {
  transition: opacity 0.4s ease-in-out;
}

/* Staggered fade effects for metrics rows */
.dashboard-container.transitioning .metrics-panel-item:nth-child(1) {
  animation-delay: 0.05s;
}
.dashboard-container.transitioning .metrics-panel-item:nth-child(2) {
  animation-delay: 0.1s;
}
.dashboard-container.transitioning .metrics-panel-item:nth-child(3) {
  animation-delay: 0.15s;
}
.dashboard-container.transitioning .metrics-panel-item:nth-child(4) {
  animation-delay: 0.2s;
}

/* Ensure animations apply to both text and icons in metric rows */
.metrics-panel-item * {
  transition: opacity 0.4s ease-in-out !important;
}

/* Fix for EquityDisplay container size consistency */
.equity-display-card {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  overflow: hidden !important;
}

.equity-display-content {
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* Ensure chart container has consistent height */
.equity-display-card .recharts-responsive-container {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
}

/* Improve font rendering during animations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Additional styles for Account List transitions */
.dashboard-container.transitioning .AccountCard {
  transition: opacity 0.5s ease-in-out, background 0.4s ease-in-out !important;
}

.dashboard-container.transitioning .AccountCard:nth-child(1) {
  transition-delay: 0.05s !important;
}

.dashboard-container.transitioning .AccountCard:nth-child(2) {
  transition-delay: 0.1s !important;
}

.dashboard-container.transitioning .AccountCard:nth-child(3) {
  transition-delay: 0.15s !important;
}

/* Specific transitions for stat elements in the metrics panel */
.dashboard-container.transitioning .metrics-panel-item .MuiTypography-root {
  transition: opacity 0.4s ease-in-out !important;
}

/* Risk Profile buttons transitions */
.dashboard-container.transitioning .RiskButton {
  transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
}

.dashboard-container.transitioning .RiskButton:nth-child(1) {
  transition-delay: 0.05s !important;
}

.dashboard-container.transitioning .RiskButton:nth-child(2) {
  transition-delay: 0.1s !important;
}

.dashboard-container.transitioning .RiskButton:nth-child(3) {
  transition-delay: 0.15s !important;
}

.dashboard-container.transitioning .RiskButton:nth-child(4) {
  transition-delay: 0.2s !important;
}

.dashboard-container.transitioning .RiskButton:nth-child(5) {
  transition-delay: 0.25s !important;
}

/* Slider thumb and progress transitions */
.dashboard-container.transitioning .SliderThumb,
.dashboard-container.transitioning .SliderProgress {
  transition: left 0.8s ease-in-out, right 0.8s ease-in-out, opacity 0.5s ease-in-out !important;
}

/* Status dot transitions for account cards */
.dashboard-container.transitioning .StatusDot {
  transition: background-color 0.5s ease-in-out !important;
}

/* Growth indicator transitions for account cards */
.dashboard-container.transitioning .GrowthIndicator {
  transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out !important;
}

/* Ensure currency and percentage animations are smooth */
.animated-currency,
.animated-percentage {
  transition: opacity 0.5s ease-in-out !important;
}