/* static/css/custom.css */

:root,
[data-bs-theme="light"] {
  --bs-primary: #ff8c00;       /* Your vibrant orange hex code */
  --bs-primary-rgb: 255, 140, 0; /* The corresponding RGB value */
  /* ... other variable overrides like --bs-secondary, --bs-light, --bs-dark ... */

  /* Define orange shades for hover/active if you want to use variables */
  --bs-orange-hover: #e67e00; 
  --bs-orange-active: #cc7000; 
  --bs-orange-focus-rgb: 255, 140, 0; 
}

/*
  Override the default btn-primary styles (as your BS compile hardcodes them)
  Also define state variables here for use below or by BS internally.
*/
.btn-primary {
  /* Default State */
  background-color: #ff8c00;
  border-color: #ff8c00;
  color: #fff; /* Text color */

  /* Variables for states (can be referenced below) */
  --bs-btn-color: #fff; 
  --bs-btn-bg: #ff8c00; 
  --bs-btn-border-color: #ff8c00; 

  --bs-btn-hover-color: #fff; 
  --bs-btn-hover-bg: var(--bs-orange-hover); 
  --bs-btn-hover-border-color: var(--bs-orange-hover); 

  --bs-btn-focus-shadow-rgb: var(--bs-orange-focus-rgb); 

  --bs-btn-active-color: #fff; 
  --bs-btn-active-bg: var(--bs-orange-active); 
  --bs-btn-active-border-color: var(--bs-orange-active); 

  --bs-btn-disabled-bg: #ffc107; 
  --bs-btn-disabled-border-color: #ffc107;
}

/*
  Explicitly override the hover, focus, and active pseudo-classes.
  This ensures they get the right colors even if your Bootstrap compile
  doesn't use the --bs-btn-* variables correctly in its pseudo-class rules.
  Referencing the variables defined in .btn-primary is the cleanest way.
*/
.btn-primary:hover {
  color: var(--bs-btn-hover-color); /* Use the variable defined in .btn-primary */
  background-color: var(--bs-btn-hover-bg); /* Use the variable defined in .btn-primary */
  border-color: var(--bs-btn-hover-border-color); /* Use the variable defined in .btn-primary */
}

.btn-primary:focus {
  /* Adjust focus style - often involves box-shadow */
  outline: 0;
  /* Bootstrap's focus shadow often uses --bs-focus-ring-color-rgb or --bs-primary-rgb */
  box-shadow: 0 0 0 .25rem rgba(var(--bs-orange-focus-rgb), .5); /* Use your custom orange rgb */
}

.btn-primary:active {
  color: var(--bs-btn-active-color); /* Use the variable defined in .btn-primary */
  background-color: var(--bs-btn-active-bg); /* Use the variable defined in .btn-primary */
  border-color: var(--bs-btn-active-border-color); /* Use the variable defined in .btn-primary */
}

/*
  You might also need to override the styles for when the button is
  in both the active state AND being hovered:
*/
.btn-primary:active:hover {
   background-color: var(--bs-btn-active-bg); /* Usually stays the active color */
   border-color: var(--bs-btn-active-border-color);
}

.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto; /* Center the card and add vertical space */
  max-width: 740px; /* Adjusted max-width to fit the chart better */
  width: 100%; /* Make card responsive */
  overflow: hidden;
  font-family: 'Arial', sans-serif;
  padding: 0; /* Remove default padding */
  position: relative; /* added for hidden? */
}

.card-header {
  background-color: #f8f9fa;
  color: #343a40;
  padding: 15px 20px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
  text-align: center; /* Center the header text */
}

.card-body {
  padding: 20px; /* Add padding inside the card body */
}
/* Optional: Limit the width of the column for a typical feed look */
.centered-column {
  max-width: 700px; /* Adjust the max-width as needed */
}
/* Style for cards that are initially hidden */
.card.lazy-hidden {
  opacity: 0;
  transform: translateY(50px); /* Start slightly below their final position */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
/* Style for cards that become visible */
.card.lazy-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Square logo settings */
.connect-with-square {
  margin-top: 15px; /* Add some space above the connect link */
  text-align: center; /* Center the content within this specific div */
}

.square-connect-link {
  display: inline-block; /* Keep as inline-block */
  text-decoration: none; /* Removes the default underline from the link */
  /* Removed color and font-weight as there's no text */
}

.square-logo {
  /* margin-right: 8px; Removed margin as there's no text */
  width: 180px; /* Increase the width of the logo (adjust as needed) */
  height: auto; /* Maintain aspect ratio */
  /* Removed display: block and margin: auto from here */
}

.square-connect-link:hover {
  opacity: 0.7; /* Add a slight opacity change on hover for visual feedback */
}

/* Fade In for cards and elements  */

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0; /* Start with opacity 0 before the animation */
}

.delayed-fade-in {
  animation-delay: 0.3s; /* Adjust the delay as needed */
}

/* loading animation css */

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Add some space above the spinner */
}

/* Styling for the spinner itself */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db; /* Color of the spinning part */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* Animation definition */
}

/* The animation keyframes */
@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

/* These are for the revenue card */
/* Basic Styling for the specific Revenue Card */
.revenue-card.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* Adjust margin as needed to match other cards */
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Styling for the Header INSIDE the Revenue Card */
.revenue-card .card-header {
  background-color: #f8f9fa;
  color: #343a40;
  padding: 15px 20px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
}

/* Styling for the Body INSIDE the Revenue Card */
.revenue-card .card-body {
  padding: 20px;
  display: flex; /* Enable Flexbox */
  flex-direction: column; /* Stack items vertically */
  /* Removed align-items: center; here */
}

/* Styling for the Text INSIDE the Revenue Card Body */
.revenue-card .card-body .card-text {
  color: #555;
  margin-bottom: 15px;
  font-size: 1em;
  /* Paragraph remains left-aligned by default */
}

/* Styling for the H5 (Revenue Value) INSIDE the Revenue Card Body */
.revenue-card .card-body h5 {
  color: #ff7f0e; /* Orange color picked from the plots */
  font-size: 2em;
  margin: 0 auto; /* Center the block element horizontally */
  font-weight: bold;
  /* Alternatively, if margin: 0 auto; doesn't work as expected (e.g., due to display type), use: */
  /* align-self: center; */
}


/* the other revenue card with confidence intervals */
.revenue-card.uncertainty-card-range {
  /* Styles inherited from .card above */
   margin-bottom: 20px; /* Adjust margin as needed */
}

.revenue-card.uncertainty-card-range .card-header {
  background-color: #f8f9fa;
  color: #343a40;
  padding: 15px 20px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
  text-align: center; /* Center the header text */
}

.revenue-card.uncertainty-card-range .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically if needed */
}

.revenue-card.uncertainty-card-range .card-body .card-text {
  color: #555;
  margin-bottom: 10px; /* Reduced margin to bring range closer */
  font-size: 1em;
  text-align: center; /* Center the paragraph text */
}

/* Style for the main projected value */
.revenue-card.uncertainty-card-range .card-body .projected-value {
  color: #ff7f0e; /* Orange color */
  font-size: 2em;
  margin: 0 0 10px 0; /* Space below the main number */
  font-weight: bold;
  text-align: center; /* Ensure the number itself is centered */
  width: 100%; /* Allow margin auto to work if needed, or align-self */
}

/* Styling for the confidence interval container */
.confidence-interval {
  margin-top: 5px; /* Space above the interval */
  font-size: 0.9em; /* Smaller font for the interval */
  color: #666; /* Slightly lighter color */
  text-align: center; /* Center the interval text */
}

.interval-label {
  font-weight: bold;
  margin-right: 5px;
}

.interval-range {
  /* No specific styles needed unless you want to highlight */
}

/* this is for the barplot of the daily revenue */

canvas {
  display: block;
  width: 100% !important; /* Ensure canvas takes full width */
  height: auto !important; /* Maintain aspect ratio */
}

.chart-container {
  position: relative;
  width: 100%; /* Make container take full width of card-body */
  /* max-width is now controlled by the card's max-width */
  /* background-color removed as card provides background */
  /* padding handled by card-body */
  /* border-radius, box-shadow removed as card provides them */
}

/* This is for the best seller products part */

/* Scoped styles for the chart */
.chart-container .bar {
  /* Fill color will be set by D3 based on value */
}
.chart-container .label {
  font-size: 12px;
  fill: #333; /* Default label color */
}
.chart-container .inside-bar-label {
  fill: #fff; /* White color for labels inside bars for better contrast */
  font-size: 12px;
}
.chart-container .value-label-inside {
  fill: #fff; /* White color for value labels inside bars */
  font-size: 12px;
  text-anchor: end; /* Anchor to the end for inside placement */
}
.chart-container .value-label-outside {
  fill: #333; /* Default color for value labels outside bars */
  font-size: 12px;
  text-anchor: start; /* Anchor to the start for outside placement */
}
.chart-container .axis text {
  font-size: 10px;
  fill: #333; /* Changed to darker grey for axis text */
}
.chart-container .axis line,
.chart-container .axis path {
  stroke: #333; /* Changed to darker grey for axis lines and path */
}
.chart-container .x-axis-label {
  font-size: 12px;
  text-anchor: middle;
  fill: #333; /* Changed to darker grey for x-axis label */
}

/* table stocking */

.dropdown-container {
  display: flex;
  gap: 20px; /* Space between dropdowns */
  margin-bottom: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.dropdown-group {
  flex: 1; /* Allow dropdown groups to grow */
  min-width: 150px; /* Minimum width before wrapping */
}
.dropdown-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 0.9em;
}
.dropdown-group select {
  width: 100%; /* Full width within its group */
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1em;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  border: 1px solid #ff7f0e; /* Add orange border to the table */
  border-radius: 4px; /* Add border radius */
  overflow: hidden; /* Ensures border radius applies to content */
}
.data-table th, .data-table td {
  border: none; /* Remove default cell borders */
  padding: 12px 10px; /* Increased padding for better spacing */
  text-align: left;
  font-size: 0.9em;
}
.data-table th {
  background-color: #ff7f0e; /* Orange background for header */
  color: #fff; /* White text for header */
  font-weight: bold;
  text-transform: uppercase; /* Uppercase header text */
  letter-spacing: 0.5px; /* Add slight letter spacing */
}
.data-table tbody tr:nth-child(even) {
  background-color: #fff3e0; /* Lighter orange background for even rows */
}
.data-table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* White background for odd rows */
}
.data-table tbody tr:hover {
  background-color: #ffe0b2; /* Lighter orange on hover */
}
.data-table td {
  border-bottom: 1px solid #eee; /* Add subtle bottom border to cells */
}
.data-table tbody tr:last-child td {
  border-bottom: none; /* Remove bottom border for the last row */
}

/* Blurring effect */
.blurred-content {
    filter: blur(5px); /* Adjust the blur intensity as needed */
    pointer-events: none; /* Prevent interaction with blurred content */
}

/* Overlay for subscription prompt */
.blurred-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Ensure it's above the blurred content */
    text-align: center;
    flex-direction: column; /* For stacking text and button */
}

.overlay-text {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Darker background for text */
    color: white;
    border-radius: 8px;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.overlay-text p {
    margin-bottom: 15px;
}

.overlay-text .btn {
    margin-top: 10px;
}