/* Common styles and variables for ML prediction pages */

/* Import global variables */
@import '../base/_variables.css';

/* Override or extend global variables if needed for this section */
/* UNUSED_SELECTOR_REMOVED 
  :root {
      /* Use global variables where possible */
      /* Example: --bg-primary: var(--bg-primary); */
  
      /* Specific colors for this section if needed, otherwise rely on global */
      /* --primary-color: var(--accent-primary); */ /* Use accent-primary for purchase green */
      /* --highlight-color: var(--accent-primary-hover); */ /* Use purchase green hover */
      /* --success-color: var(--status-success); */
      /* --warning-color: var(--status-warning); */
      /* --danger-color: var(--status-error); */
  
      /* Background Colors */
      /* --bg-primary: var(--bg-primary); */
      /* --bg-secondary: var(--bg-secondary); */
      /* --card-bg-color: var(--bg-card); */ /* Use bg-card for common cards */
  
      /* Text Colors */
      /* --text-primary: var(--text-primary); */
      /* --text-secondary: var(--text-secondary); */
      /* --text-muted: var(--text-secondary); */ /* Use text-secondary for muted */
      /* --text-on-primary: var(--button-text); */
  
      /* Border and Shadow */
      /* --border-color: var(--border-color); */
      /* --shadow-color: var(--player-shadow); */ /* Use subtle shadow from variables */
  
      /* Button Colors - Use global button variables */
      /* --button-bg: var(--button-bg); */
      /* --button-hover: var(--button-hover); */
  }
*/

/* Dark mode support - Variables are now handled in _variables.css */
/* Remove dark mode block from here */


/* Common Card Styles */
.stats-card {
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    background-color: var(--bg-card); /* Use bg-card */
    color: var(--text-primary); /* Use global variable */
    box-shadow: 0 4px 12px var(--shadow-color); /* Use subtle shadow */
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color); /* Add subtle border */
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--shadow-color); /* Slightly larger shadow on hover */
}

/* Icons */
    color: var(--text-secondary); /* Use secondary text color for icons */
    margin-bottom: 1rem;
}

/* Highlight Boxes */
.highlight-box {
    background-color: var(--bg-secondary); /* Use secondary background */
    border-left: 4px solid var(--accent-subtle); /* Use subtle accent for border */
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary); /* Ensure text color is primary */
}

/* Chart Containers */
.chart-container {
    position: relative;
    margin: auto;
    height: 300px;
    margin-bottom: 2rem;
}

/* Badges */
.badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
}

/* Confidence level badges */
.badge {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

    color: var(--button-text); /* Use button text color */
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); /* Keep subtle shadow */
}

    color: var(--button-text); /* Use button text color */
}

/* Confidence thresholds - Use status colors */
    color: var(--button-text);
}

    color: var(--text-primary); /* Warning text is dark */
}

    color: var(--button-text);
}

/* Trend Indicators - Use status colors */
}

}

/* Common Button Styles */
.btn {
    border-radius: 5px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--button-bg); /* Use default button background */
    border-color: var(--button-bg);
    color: var(--button-text);
}

.btn-primary:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}

.btn-outline-primary {
    color: var(--text-secondary); /* Use secondary text color for outline */
    border-color: var(--border-color); /* Use border color for outline */
}

.btn-outline-primary:hover {
    background-color: var(--border-color); /* Use border color on hover */
    color: var(--text-primary); /* Use primary text color on hover */
}

/* Card Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow-color);
}

/* Common CTA Section */
.cta-section {
    background-color: var(--bg-secondary); /* Use secondary background */
    padding: 3rem 0;
    margin: 2rem 0;
    border-top: 1px solid var(--border-color); /* Use border color */
    border-bottom: 1px solid var(--border-color); /* Use border color */
    color: var(--text-primary); /* Ensure text color is primary */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary); /* Use primary text color */
    margin-bottom: 1rem;
}

.lead {
    color: var(--text-secondary); /* Use secondary text color for lead text */
}

.text-muted {
    color: var(--text-secondary) !important; /* Use secondary text color for muted */
}

.text-success {
    color: var(--status-success) !important; /* Use success status color */
}

/* Links */
a {
    color: var(--text-secondary); /* Use secondary text color for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--text-primary); /* Use primary text color on hover */
    text-decoration: none;
}

/* Responsive Text */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
}