/* Base page background and text */
html, body {
    background-color: #1F223C;
    color: white;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Button press effect */
  button:active {
    transform: scale(0.97);
  }
  
  /* Fade-in animation */
  .fade-in {
    animation: fadeIn ease 0.8s;
    opacity: 0;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Tab transition animations */
  .tab-slide-left {
    animation: slideLeft 1.2s ease-out forwards;
  }
  
  .tab-slide-right {
    animation: slideRight 1.2s ease-out forwards;
  }
  
  @keyframes slideLeft {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  

/* CHANGE ELEMENTS OF THE FLOW DIAGRAMS FROM REACTFLOW */

/* assets/style.css */
.react-flow__minimap {
    display: none !important;
}

/* Hide zoom control buttons */
.react-flow__controls {
    display: none !important;
}

/* Hide the minimap */
.react-flow__minimap {
    display: none !important;
}

/* Hide the watermark / logo */
.react-flow__attribution {
    display: none !important;
}

/* Change the node connection dots (handles) */
.react-flow__handle {
    background-color: #FFFFFF !important; /*white */
    width: 5px;
    height: 5px;
    border-radius: 50%; /* keep them round */
    border: none;
}


/* 3) Each option line:
   – .styled-dropdown__option is a single row in the list
   – .styled-dropdown__option--is-focused is the hover/focus state
   – .styled-dropdown__option--is-selected is the selected state
   We style all of them dark with white text, plus a light hover.
*/
.styled-dropdown__option {
  background-color: #1F223C !important;
  color: white !important;
}

.styled-dropdown__option--is-focused {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.styled-dropdown__option--is-selected {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 4) If you ever switch to isMulti mode (chips/pills),
   these are the “tag” backgrounds & text colors: */
.styled-dropdown__multi-value {
  background-color: #1F223C !important;
}

.styled-dropdown__multi-value__label {
  color: white !important;
}

/* 5) Remove any default outlines/overrides (optional but cleans up focus) */
.styled-dropdown__control--is-focused {
  box-shadow: 0px 6px 10px #1F223C  !important;
}


.Select-control {
    background-color: #1F223C !important;
    color:white;
  }
  
.Select-menu-outer {
    background-color: #1F223C;
    color: white;
}

.Select-value-label {
    color: white !important;
}


/* 3) The main-content wrapper (anchors the swirl) */
.main-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 10px;
}

/* 4) Static swirling background */
/*    Matches your <div className="swirl-bg"> */
.swirl-bg {
  position: absolute;
  inset: -50%;   /* expand so corners never go blank */
  background: linear-gradient(90deg, rgba(27, 29, 60, 1) 30%,
    rgba(255,110,199,0.2) 60%,
    rgba(255,110,199,0.3) 70%,
    rgba(255,110,199,0.2) 95%,
    rgba(255,110,199,0.4) 100%
  );
  filter: blur(40px);
  z-index: 0;
}

/* 5) Your real page content sits on top */
.page-container {
  border-color: "red";
  position: relative;
  z-index: 1;
  flex: 1;
  background-color: inherit;  /* or specify COLOR_SCHEME["background"] */
  overflow: auto;
}


.tile-card {

  border-radius: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  /* Unified background tone (from .table-tile) */
  background-color: rgba(27, 29, 60, 0.1);
  background-clip: padding-box;

  /* Frosted glass effect */
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(3px) !important;
  filter: saturate(120%);

  /* Inner border + outer soft drop-shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.4);
  
  /* Optional: remove if you don’t want radial highlight */
  background-image: radial-gradient(
    circle at bottom center,
    rgba(248, 7, 168, 0.1),
    transparent 80%
  );
}

/* Optional gradient ring around the tile */
.tile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;

  background: linear-gradient(
    to right,
    rgba(209, 202, 202, 0.116),
    rgba(255, 255, 255, 0.05)
  ) border-box;

  mask:
    linear-gradient(black, black) border-box,
    linear-gradient(black, black) padding-box;
  mask-composite: subtract;
  -webkit-mask-composite: destination-out;
}



/* assets/styles.css */

.wallpaper {
  z-index: 0;

  /* use the raw SVG as a repeating background */
  background-color: #1B1D3C;  /* fallback */
  background-image: url("topography.svg");
  background-repeat: repeat;
}


/* assets/styles.css */

.table-tile {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: rgba(27,29,60,0.1);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(3px) !important;
  
  /* inset border + outer shadow in one property */
  box-shadow:
    /* inset 1px “border” */ 
    inset 0 0 0 1px rgba(255,255,255,0.2),
    /* outer soft drop-shadow */
    0 6px 16px rgba(0,0,0,0.4);
  
  /* collapse spacing for zebra stripes etc. */
  border-collapse: separate;
  border-spacing: 0;
}

/* Zebra striping on body rows */
.table-tile tbody tr:nth-child(odd) td {
  background-color: rgba(27,29,60, 0.2) !important;
}

.table-tile tbody tr:nth-child(even) td {
  background-color: rgba(27,29,60, 0.10) !important;
}


/* 1) Make every cell a relative container and clip its overflow */
.table-tile td {
  position: relative;
  overflow: hidden;
  background-color: transparent !important;  /* ensure no opaque fill */
}

/* 2) Base rules for our radial-glow pseudo */
.table-tile td::before {
  content: "";
  position: absolute;
  inset: 0;               /* fill the whole cell */
  border-radius: inherit; /* match the cell’s rounded corners */
  z-index: -1;            /* behind the text */
}

/* Reset any previous text-shadow or borders on cells */
.table-tile th,
.table-tile td {
  text-shadow: none !important;
  border: none !important;
}


/* Make sure cells can show a glow behind text */
.table-tile td {
  position: relative;  /* so text-shadow renders correctly */
}

/* Low (Red) */
.table-tile .cell-low {
  color: #E52321 !important;
  text-shadow: 0 0 20px rgba(229, 35, 33, 0.85) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  filter: saturate(1);
}

/* Low–Medium (Orange) */
.table-tile .cell-lowmedium {
  color: #FFA500 !important;
  text-shadow: 0 0 20px rgba(255, 165, 0, 0.80) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  filter: saturate(1.2);
}

/* Medium (Yellow) */
.table-tile .cell-medium {
  color: #FDC501 !important;
  text-shadow: 0 0 20px rgba(253, 197, 1, 0.95) !important;
  filter: saturate(1.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Medium–High (Green) */
.table-tile .cell-mediumhigh {
  color: #7BBE74 !important;
  text-shadow: 0 0 12px rgba(123, 190, 116, 0.70) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  filter: saturate(1);
}

/* High (Teal/Green) */
.table-tile .cell-high {
  color: #06a26b !important;
  text-shadow:
    0 0 20px rgba(6, 162, 107, 0.85),
    0 0 28px rgba(6, 162, 107, 0.55) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  filter: saturate(1.6);
}






.table-tile th,
.table-tile td {
  color: #fff;
}

.custom-modal .modal-content {
    background-color: #1e1e2f; /* or use COLOR_SCHEME["background"] if injected */
    color: white; /* optional, for better contrast */
    
}


/* Scrollbar styling for modern browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Firefox scrollbar (limited support) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/*       SIDEBAR       /*
/* SIDEBAR NAVIGATION BUTTONS */

.nav-pills .nav-link {
  background-color: transparent;
  color: #E0E0E0;
  border-radius: 8px;
  padding: 10px 16px;
  transition: all 0.2s ease-in-out;
}

.nav-pills .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

.nav-pills .nav-link.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-weight: 200;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
  border-left: 3px solid #FFD93D;  /* or your accent color */
}

/* SIDEBAR CONTAINER */
.sidebar-container {
  position: relative;
  height: 100%;
  padding-left: 0px;


  /* Frosted background with gradient highlight */
  background-color: rgba(27, 29, 60, 0.1);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  filter: saturate(120%);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.4);

}

/* Gradient ring layer like tile-card */
.sidebar-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;

  background: linear-gradient(
    to right,
    rgba(209, 202, 202, 0.1),
    rgba(255, 255, 255, 0.05)
  ) border-box;

  mask:
    linear-gradient(black, black) border-box,
    linear-gradient(black, black) padding-box;
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
}

body {
  font-weight: 200; /* Normal */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 100; /* Semi-bold for headings */
}

button, .btn {
  font-weight: 200;
}

/* ===========================================
   Styled Dropdown (classNamePrefix="styled-dropdown")
   Matches sidebar look (dark, frosted, subtle border/glow)
   =========================================== */

/* Target .styled-dropdown applied to dbc.DropdownMenu */
.styled-dropdown .dropdown-toggle {
  background-color: #1B1D3C !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  font-size: 13px;
  padding: 6px 14px;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  align-items: center;
  display: flex;
  
}

.styled-dropdown .dropdown-menu {
  background-color: rgba(27, 29, 60, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  padding: 6px 0;
}

.styled-dropdown .dropdown-item {
  color: #EDEDED !important;
  font-size: 13px;
  padding: 8px 16px;
  transition: background-color 0.2s ease;
  font-weight: 200
}

.styled-dropdown .dropdown-item:hover {
  background-color: rgba(255,110,199,0.1) !important;
  color: #FFD93D !important;
  font-weight: 200
}


/* Menu list (the options container) */
.styled-dropdown__menu-list {
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 4px 0;
}

/* Option style */
.styled-dropdown__option {
  color: #ffffff !important;
  font-size: 13px;
  padding: 8px 16px;
  transition: background-color 0.2s ease;
}

/* Hover + focus state */
.styled-dropdown__option:hover,
.styled-dropdown__option--is-focused {
  background-color: rgba(255, 110, 199, 0.1) !important;
  color: #FFD93D !important;
}

/* Selected option */
.styled-dropdown__option--is-selected {
  background-color: rgba(255, 110, 199, 0.2) !important;
  color: #FFD93D !important;
  font-weight: 500;
}

/* ===========================================
   Styled Tooltip (matches dropdown theme)
   =========================================== */
/* Apply styling to the tooltip text box itself */
.styled-tooltip .tooltip-inner {
  background-color: rgba(27, 29, 60, 0.95) !important;
  color: #FFD93D !important;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 8px 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  max-width: 260px;
  white-space: normal;
}

/* Title part */
.styled-tooltip .tooltip-inner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #FFD93D;
}

/* ===========================================
   Tooltip Arrow (override default black)
   =========================================== */
.styled-tooltip .tooltip-arrow::before {
  border-top-color: rgba(27, 29, 60, 0.95) !important;
  border-bottom-color: rgba(27, 29, 60, 0.95) !important;
  border-left-color: rgba(27, 29, 60, 0.95) !important;
  border-right-color: rgba(27, 29, 60, 0.95) !important;
}

/* Optional: hover "glow" effect */
.styled-tooltip:hover {
  box-shadow: 0 0 12px rgba(255,110,199,0.4);
}


/* === Unified Toggle Styling for Mantine Switch === */
/* Mantine Switch root (main wrapper around track/thumb) */
/* Style the Mantine Switch wrapper to match dropdown container */
.styled-mantine-switch .mantine-Switch-root {
  background-color: #1B1D3C !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px !important;
  padding: 6px 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
}

/* Track (rail behind thumb) */
.styled-mantine-switch .mantine-Switch-track {
  background-color: #1B1D3C !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Thumb (circle toggle) */
.styled-mantine-switch .mantine-Switch-thumb {
  background-color: #FFD93D !important;
  box-shadow: 0 0 4px rgba(255, 217, 61, 0.4);
}

/* FOR THE GRAPH TOGGLES /*

/* Container: no background, just spacing */
/* Container */
/* Container */
.styled-segmented-toggle {
  display: flex;
  gap: 6px;
  font-size: 13px;
  font-weight: 200;
}

/* Buttons */
.styled-segmented-toggle .mantine-SegmentedControl-control {
  all: unset;  /* Reset default behavior */
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
  color: #ffffff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 200;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  user-select: none;
}

/* Hover */
.styled-segmented-toggle .mantine-SegmentedControl-control:hover {
  border-color: #FFD93D;
  color: #FFD93D;
}

/* Active */
.styled-segmented-toggle .mantine-SegmentedControl-control[data-active="true"] {
  border-color: #FFD93D;
  color: #ffffff;
  font-weight: 200;
  box-shadow: 0 3px 6px rgba(255, 217, 61, 0.2);
}

/* Hide radio inputs */
.styled-segmented-toggle input[type="radio"] {
  display: none !important;
}

/* Read more: yellow by default, white on hover/focus/active */
.read-more-btn,
.btn-link.read-more-btn {
  color: #FFD93D !important;       /* yellow */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  transition: color .15s ease-in-out;
  text-decoration: none !important; /* no underline */
}

.read-more-btn:hover,
.read-more-btn:focus,
.read-more-btn:active {
  color: #FFFFFF !important;        /* white on hover/focus */
  text-decoration: none !important;
}


/* Make the tile returned by expl_tile fill the wrapper’s height */
.explain-fill > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* If your explainer content is markdown, allow internal scroll when long */
.explain-fill .dash-markdown {
  overflow: auto;
  min-height: 0;
}