:root {
  /* Updated Colors*/
  --primary-color:  #160045;
  --primary-light: #0b0132
  --primary-hover: rgba(0, 128, 1, 0.15);
  --primary-dark: #4A3B75 ;
  --accent-color: #5893df;
  --accent-light: rgba(88, 147, 223, 0.08);
  --accent-hover: rgba(88, 147, 223, 0.15);
  --accent-dark: #3a75c1;
  --text-primary: #152335;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --background-light: #FFFFFF !important;
  --background-white: #FFFFFF;
  --success-color: #1E6536;
  --success-bg: #DCFCE7;
  --success-hover: #CDFAD8;
  --info-color: #1E40B0;
  --info-bg: #DBEAFE;
  --info-hover: #C9E3FE;
  --warning-color: #B45309;
  --warning-bg: #FEF3C7;
  --warning-hover: #FDE9B0;
  --danger-color: #991B1C;
  --danger-bg: #FDE2E2;
  --danger-hover: #FBCACA;
    /* New variables for consistent colors */
  --green-light-bg: #F4F8F3;
  --danger-light-bg: #FDE2E1;
  --danger-color-alt: #981B1C;
  --slider-rail-color: #e0e0e0;
  --button-highlight: rgba(255, 255, 255, 0.2);

  /* Gradient background */
--gradient-blue-pink: linear-gradient(135deg,
  #f2f4ff 0%,     /* Neutral cool white with hint of blue */
  #f3f4ff 20%,    /* Very subtle cool white */
  #f5f3ff 40%,    /* Transition to neutral white with hint of lavender */
  #f6f4ff 60%,    /* Soft white with subtle lavender undertone */
  #f7f4ff 80%,    /* Delicate lavender white */
  #f8f5ff 100%    /* Very soft lavender white */
);

  /* Improved Typographie */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-tight: 1.25;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* Enhanced Espacements */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Refined Bordures */
  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;
  --border-width-thin: 1px;
  --border-width-normal: 2px;
  --border-width-thick: 3px;
  --border-color-light: #E2E8F0;
  --border-color-medium: #CBD5E1;

  /* Better Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.04), 0 4px 6px rgba(0, 0, 0, 0.02);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.04), 0 10px 10px rgba(0, 0, 0, 0.02);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-outline: 0 0 0 3px rgba(0, 128, 1, 0.2);

  /* Snappy Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max-width: 1600px;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-tooltip: 1050;
}

/* ====== RESET & BASE STYLES ====== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  background-color: var(--background-light);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ====== UTILITY CLASSES ====== */
.color-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-accent-light { background-color: var(--accent-light) !important; }
.bg-light { background-color: var(--background-light) !important; }
.bg-white { background-color: var(--background-white) !important; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.d-flex { display: flex; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-grow { flex-grow: 1; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.w-100 { width: 100%; }
.w-80 { width: 80%; }
.w-50 { width: 50%; }
.max-w-full { max-width: 100%; }
.max-w-xl { max-width: 1200px; }
.max-w-lg { max-width: 960px; }
.max-w-md { max-width: 768px; }
.fullwidth { width: 100%; }


.hidden { display: none !important; }
.rounded { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.border { border: var(--border-width-thin) solid var(--border-color-light); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: var(--spacing-xs) 0;
}

/* root.md */
.selector-container-header {
  align-items: flex-start; /* Align parts at the top */
  margin: 0 auto;
  padding: var(--spacing-lg);
  background: var(--gradient-blue-pink);
  /*border-radius: var(--border-radius-lg);*/
  box-shadow: var(--shadow-lg);
}

.right-aligned-logo {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* INSIGHTS */

.selector-container {
  display: flex;
  justify-content: center;  /* Changed from center to flex-start */
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: 20px;
  padding: 30px;
  /*background: var(--gradient-blue-pink);
  /*border-radius: var(--border-radius-lg);*/
  box-shadow: var(--shadow-md);
}
.selector-container-market {
  display: flex;
  justify-content: center;  /* Changed from center to flex-start */
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px;
  background: var(--gradient-blue-pink);
  /*border-radius: var(--border-radius-lg);*/
  box-shadow: var(--shadow-md);
}

.selector-container-visualization {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: 20px;
  padding: 30px;
  /*border-radius: var(--border-radius-lg);*/
  box-shadow: var(--shadow-md);
}

.selector-container label {
  color: var(--primary-color); /* Change to your desired color */
  font-weight: var(--font-weight-medium); /* Optional: Adjust font weight */
  font-size: var(--font-size-sm); /* Optional: Adjust font size */
}

.insights-part {
  border: 1px solid var(--primary-color);
  padding: 20px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.insights-expandable {
  border: none;
  border-radius: var(--border-radius-lg);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  background-color: var(--background-white);
  box-shadow: var(--shadow-md);
}

.insights-expandable:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);

}

.pre-wrap { white-space: pre-wrap; }
.pre-wrap-space {
  white-space: pre-wrap;
  line-height: var(--line-height-relaxed);
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* Center the button container vertically */
.insights-button-part {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px; /* Space between buttons */
  min-height: 100px; /* Adjust based on available space */
  margin: var(--spacing-md) 0;
    margin-top: 20px; /* Adds space above the Reset button */

}
.insights-button-part {
  margin-top: 20px; /* Adds space above the Reset button */
}

.browse-button.taipy-button {
  color: var(--text-primary)
  gap: var(--spacing-sm);
  margin: 0 auto; /* This centers the button */
  border: 1px solid var(--primary-color); /* Add this line */

}

.reset-conv-button.taipy-button,
.download-forecast-button.taipy-button {
  font-size: var(--font-size-xs);
  border: var(--border-width-thin) solid var(--primary-color) !important;
  color: var(--primary-color);
  border-radius: var(--border-radius-full);
  background-color: white;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: 28px;
  min-height: auto;
  line-height: 1;
}
.logout-button.taipy-button,
.reset-chat-button.taipy-button {
  font-size: var(--font-size-xs);
  border: var(--border-width-thin) solid var(--primary-color) !important;
  color: var(--primary-color);
  border-radius: var(--border-radius-full);
  background-color: white;
  gap: var(--spacing-xs);
  height: 28px;
  min-height: auto;
  line-height: 1;
}

.logout-button.taipy-button:hover {
  background-color: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}


.right-aligned-source {
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

.chart-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--background-white);
  padding: var(--spacing-lg);
}

.centered-card {
  text-align: center;
  /*background-color: var(--primary-light);*/
  border-radius: 8px; /* Rounded corners */
  padding: 16px; /* Some padding for better appearance */
  border: 1px solid var(--primary-color); /* Green left border for visual identification */

}

.card.card-summary {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
  padding: 10px 16px; /* Reduced padding (top/bottom, left/right) */
  min-height: unset; /* Remove any minimum height restriction */
  margin: 8px; /* Smaller margin */
  border-radius: var(--border-radius-md);
    width: fit-content;

}

.card.card-anomaly {
  color: var(--danger-color);
  border-left: 4px solid var(--danger-color);
  padding: 10px 16px; /* Reduced padding (top/bottom, left/right) */
  min-height: unset; /* Remove any minimum height restriction */
  margin: 8px; /* Smaller margin */
  border-radius: var(--border-radius-md);
    width: fit-content;

}

.selector-container-bis{
  gap: var(--spacing-md);  /* Reduced from xl/2xl to md */
  margin-top: var(--spacing-lg);
  display: flex;
  justify-content: center;  /* Changed from center to flex-start */
  align-items: center;
  flex-wrap: wrap;
  /*max-width: var(--container-max-width);*/
  margin: 0 auto;
  gap: 30px;  /* Added a small gap */
  padding: var(--spacing-md);
  background-color: var(--background-white);
}

.centered-layout {
    justify-content: center;

}

.wide-selector {
    width: 100% !important;
    min-width: 700px;
}

.wide-selector-all-types {
    width: 100% !important;
    min-width: 400px;
}

.custom-heading {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    display: flex;
    align-items: center;
}

.total-title {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  text-align: center;

}

/* Slider */
.custom-slider .MuiSlider-thumb {
  color: var(--primary-color);
  width: 10px;
  height: 10px;
  transition: box-shadow var(--transition-normal);
}

.custom-slider .MuiSlider-thumb:hover,
.custom-slider .MuiSlider-thumb.Mui-focusVisible {
  box-shadow: 0 0 0 8px var(--primary-light);
}

.custom-slider .MuiSlider-track {
  color: var(--primary-color);
  height: 2px;
  border-radius: 1px;
}

.custom-slider .MuiSlider-rail {
  color: var(--slider-rail-color);
  height: 2px;
  border-radius: 1px;
}

.custom-slider .MuiSlider-valueLabel {
  background-color: var(--primary-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}


.run-prediction-button.taipy-button {
  color: var(--text-primary);
  /*padding: var(--spacing-sm) var(--spacing-md);*/
  font-size: var(--font-size-sm);
  /*border: none;*/
  border-color: var(--primary-color) !important;
  /*border-radius: var(--border-radius-full);
  /*background-color: var(--primary-color);*/
  /*color: white;*/
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: center;
}

/* Button hover states */

.run-insights-button.taipy-button:hover,
.run-prediction-button.taipy-button:hover {
  background-color: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}


.reset-conv-button.taipy-button:hover,
.download-forecast-button.taipy-button:hover {
  background-color: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary-dark) !important;
  transform: translateY(-1px);
}

.download-forecast-button.taipy-button {
  display: block;
  margin: 0 auto;
}

.download-forecast-button.taipy-button::before {
  font-size: 0.9em;
}

/*CHAT*/
.toggle-container-center {
    display: grid;
    width: 100%;
    place-items: center;
}

.toggle-container-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 10px; /* Adds space between the toggle and button */
    align-items: center; /* Vertically centers items */
    flex-direction: row; /* Ensures horizontal layout */
    flex-wrap: nowrap; /* Prevents wrapping to new lines */
}


.chat-part {
  /*border: 1px solid var(--primary-color);*/
  background: var(--background-white);
  padding: 20px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.custom-chat-table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.custom-chat-table thead,
.custom-chat-table th {
  display: none;
}

.custom-chat-input {
  width: 80%;
  display: block;
  margin: var(--spacing-lg) auto;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-md);
  border: var(--border-width-thin) solid var(--border-color-light);
  transition: all var(--transition-normal);
}

.custom-chat-input:focus {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-outline);
  outline: none;
}

.gpt_message > td {
  display: block;
  padding: var(--spacing-md);
  background-color: var(--primary-light);
  border-radius: var(--border-radius-md);
  border-top-left-radius: 0;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: var(--font-size-md);

  /*position: relative;*/
}

.gpt_message > td::before {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);

}

.user_message td {
  margin-right: 30px;
  max-width: 60%;
  background-color: var(--background-light);
  padding: var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);

}


.suggested-question-button.taipy-button {
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  border: var(--border-width-thin) solid var(--border-color-medium);
  border-radius: var(--border-radius-full);
  background-color: var(--background-white);
  margin: var(--spacing-xs);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
}

.suggested-question-button.taipy-button:hover {
  background-color: var(--accent-light);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.card.card-questions {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
  padding: 10px 16px;
  min-height: unset;
  margin: 8px;
  border-radius: var(--border-radius-md);
  max-width: 500px;
  width: fit-content;
}



.taipy-watermark {
    display: none !important;
}

.right-align { text-align: right; }


/* Accordion  Expandable */
.MuiAccordion-root {
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-lg) !important;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  background-color: var(--background-white);
}

.MuiAccordionSummary-root {
  padding: var(--spacing-md);
  transition: background-color var(--transition-normal);
  border-bottom: var(--border-width-thin) solid var(--border-color-light);
}

.MuiAccordionSummary-root:hover {
  background-color: var(--accent-light);

}

.MuiAccordionSummary-root:hover .MuiAccordionSummary-content {
  color: var(--primary-color) !important;
}

.MuiAccordionSummary-content {
  margin: var(--spacing-xs) 0;
  font-weight: var(--font-weight-medium);
}

.MuiAccordionDetails-root {
  padding: var(--spacing-md);
}

/* Navbar and tabs */

.MuiTabs-flexContainer {
  background-color: transparent !important;
  padding: var(--spacing-xs) 0;
}

.MuiButtonBase-root.MuiTab-root.MuiTab-textColorPrimary {
  color: var(--text-primary) !important;
  background-color: transparent;
  transition: all var(--transition-normal);
  border-radius: var(--border-radius-md);
  margin: 0 var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  min-width: auto;
  text-transform: none;
  letter-spacing: var(--letter-spacing-wide);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}


.MuiButtonBase-root.MuiTab-root.MuiTab-textColorPrimary:not(.Mui-selected):hover {
  background-color: var(--primary-light);
  color: var(--primary-color) !important;
}

.MuiTabs-indicator {
  background-color: var(--primary-color) !important;
  height: 3px;
  border-radius: 1.5px;
}


/* Selectors */
.taipy-selector {
  width: 200px;
  transition: all var(--transition-normal);
  background-color: var(--primary-light); /* Change this to your desired color */
  border-color: var(--primary-color); /* Optional: Adjust border color */
  color: var(--text-primary) !important; /* Ensure text color is also overridden */
}

.date-range-selector{
  width: 350px;
}
.date-selector{
  width: 170px;
}


.taipy-selector:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color) !important; /* Optional: Adjust border color */
}



.taipy-selector.custom-selector {
  width: 180px !important;
}

/* Date range selector */
.taipy-date {
  display: flex;
  flex-direction: column;
}

.taipy-date label {
  color: var(--primary-color);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
}

.taipy-date input {
  border-radius: var(--border-radius-md);
  border: var(--border-width-thin) solid var(--border-color-light);
  padding: var(--spacing-sm);
  transition: all var(--transition-normal);
}

.taipy-date input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: var(--shadow-outline);
}


/* To change hover_text style*/
.MuiTooltip-tooltip.MuiTooltip-tooltipPlacementTop.css-wda7l3 {
  font-size: 15px;
  background-color: var(--primary-color);
}

/* Switch */
.MuiSwitch-root {
  width: 58px;
  height: 38px;
}

.MuiSwitch-root .MuiSwitch-switchBase {
  padding: 9px;
}

.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked {
  color: var(--primary-color);
  transform: translateX(20px);
}

.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: var(--primary-light);
  opacity: 1;
}

.MuiSwitch-root .MuiSwitch-thumb {
  width: 20px;
  height: 20px;
  box-shadow: var(--shadow-sm);
}

.MuiSwitch-root .MuiSwitch-track {
  border-radius: 20px;
  opacity: 0.3;
}


/* Buttons */
.taipy-button {
  transition: all var(--transition-normal);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-md);
  text-transform: none;
  position: relative;
  overflow: hidden;
  letter-spacing: var(--letter-spacing-wide);
}

.taipy-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--button-highlight);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out;
}

.taipy-button:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 0;
}

/* Form elements */
.MuiFormLabel-root,
.MuiFormLabel-root.Mui-focused {
  color: var(--primary-color) !important;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
}

.MuiOutlinedInput-root {
  border-radius: var(--border-radius-md);
  transition: all var(--transition-normal);
  background-color: var(--background-white);
  box-shadow: var(--shadow-sm);
}

.MuiFormLabel-root.MuiInputLabel-root {
  color: var(--primary-color) !important; /* Change to your desired color */
  font-size: var(--font-size-sm); /* Optional: Adjust font size */
  font-weight: var(--font-weight-medium); /* Optional: Adjust font weight */
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color) !important;
  border-width: var(--border-width-normal);
  /*box-shadow: var(--shadow-outline);*/
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color); /* Border color when focused */
  border-width: var(--border-width-normal); /* Optional: Adjust border width */
  box-shadow: var(--shadow-outline); /* Optional: Add shadow */
}

.MuiOutlinedInput-root .MuiOutlinedInput-input {
  padding: var(--spacing-sm) var(--spacing-md);
}

.MuiInputLabel-root {
  transform: translate(14px, 14px) scale(1);
}

.MuiInputLabel-shrink {
  transform: translate(14px, -6px) scale(0.75);
}

/* Layout components */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Fix invisible labels - top priority */
.MuiFormLabel-root {
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  transform: none !important;
  font-size: 14px !important;
  color: #008001 !important;
  font-weight: 500 !important;
}

.insights-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

/* Override Taipy's default background color */
body.taipy-light {
  background:  #FFFFFF !important;
}

.jsx-parser {
  background-color: #FFFFFF !important;
}

.chat_layout {
  background: var(--background-white);
}

.css-1xutyb8:not(.MuiInputLabel-shrink):not(.static-label) {
  display: none;
}

.pre-wrap-space pre {
  white-space: pre-wrap; /* Ensures text wraps */
  text-align: left;
}

/* Styles for change indicators */
.positive-change {
  color: #2e7d32;
  font-weight: bold;
}

.negative-change {
  color: #c62828;
  font-weight: bold;
}

.change-text {
  display: block;
  margin-top: 5px;
  font-weight: normal;
}
/* Styles for percentage changes */

.centered-card {
  text-align: center;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 0px auto;
}

.login-error {
  color: red;
  margin-top: 10px;
  font-weight: bold;
}

.taipy-login {
  width: 100%;
}


/* Main login-form class to apply to the dialog container */
.login-form {
  margin:0px
}

.login-form .css-5urmms {
  box-shadow: 0px 11px 15px -7px #1e653696, 0px 24px 38px 3px #1e653696, 0px 9px 46px 8px #1e653696;
}

.login-form .css-ua7ls {
  margin-top: 20px;
  margin-bottom: 20px;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Compact table styling */
.compact-table table { border: 2px solid #333 !important;}
.compact-table td, .compact-table th { padding: 2px 8px !important; }
.compact-table { transform: scale(0.95) }

.header-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-layout > *:first-child {
  flex: 1;
  text-align: center;
}

.header-layout > *:last-child {
  flex: 0;
  text-align: right;
}

/* Style for View PDF column - underline text only*/
.compact-table td:nth-child(2) {
  color: var(--primary-color) !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-radius: 2px !important;
  position: relative !important;
  transition: all 0.1s ease !important;
}

.compact-table td:nth-child(2)::after {
  content: '' !important;
  position: absolute !important;
  bottom: 25% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important;
  height: 1px !important;
  background-color: var(--primary-color) !important;
}

.compact-table td:nth-child(2):hover {
  color: var(--primary-dark) !important;
  transform: scale(1.1) !important;
}

.card-button {
  background: white;
  border-radius: 12px;
  padding: 3rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  min-height: 200px;
  font-size: 1.2rem;
  font-weight: 600;
  width: 100%;
}

.card-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  background: #f8fafc;
}

.card-board {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  height: 100%;
  text-align: center;
}

.card-board-grey {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  height: 100%;
  text-align: center;
}