:root {
  --color-bgcr-p1: #56fa8f;
  --color-bgcr-p25: #0dcaf0;
  --color-bgcr: #17ba4f;
  --color-bgcr-p75: #ffec8b;
  --color-bgcr-p99: #ff952b;
  --color-bgcr-iqr-bp: #0dcaf0;
  --color-bgcr-range-bp: #87eb91;
  --color-gcf-dtcc: #f9e460;
  --color-sofr: #5792ff;
  --color-gcf-bgcr-bp: #f9e460;
  --color-sofr-bgcr-bp: #5792ff;
  --color-gcf-sofr-bp: #0dcaf0;
  --color-bgcr-iqr-z60: #0dcaf0;
  --color-bgcr-range-z60: #F2F2F2;
  --color-bgcr-asym-z60: #ffec8b;
  --color-bgcr-tail-asym-z60: #ff4500;
  --color-bgcr-volume-z60: #9b59b6;
  --color-gcf-bgcr-z60: #9b59b6;
  --color-sofr-bgcr-z60: #F2F2F2;
  --color-gcf-sofr-z60: #0dcaf0;
  --color-bgcr-volume: #F2F2F2;
  --color-bgcr-volume-ma20: #0D6EFD;
  --color-carry-3m-bgcr-bp: #0dcaf0;
  --color-carry-2y-bgcr-bp: #ffec8b;
  --color-carry-10y-bgcr-bp: #00df76;
  --color-carry-30y-bgcr-bp: #ff4500;
  --color-carry-3m-gcf-bp: #0dcaf0;
  --color-carry-2y-gcf-bp: #ffec8b;
  --color-carry-10y-gcf-bp: #00df76;
  --color-carry-30y-gcf-bp: #ff4500;
  --color-carry-3m-sofr-bp: #0dcaf0;
  --color-carry-2y-sofr-bp: #ffec8b;
  --color-carry-10y-sofr-bp: #00df76;
  --color-carry-30y-sofr-bp: #ff4500;
  --color-p1-bgcr-bp:  #56fa8f;
  --color-p25-bgcr-bp: #0dcaf0;
  --color-p75-bgcr-bp: #ffec8b;
  --color-p99-bgcr-bp: #ff952b;

  --chart-text-color: #E0E0E0;
  --chart-grid-color: #444444;
  --chart-border-color: #444444;
  --chart-zero-line-color: rgba(255, 255, 255, 0.5);
  --info-background: rgba(21, 19, 21, 0.95);
  --info-border: #E0E0E0;
  --info-disabled: #666666;
  --info-separator: rgba(255, 255, 255, 0.2);
  --info-content-margin-left: 40px;
  --info-date-font: bold 13px Arial, sans-serif;
}

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #1A1A1A;
font-family: Arial, sans-serif;
color: white;
overflow: hidden !important;
}

.hidden {
display: none !important;
}

.dashboard-stage {
position: relative;
width: 100%;
height: 100vh;
max-height: 100vh;
background-color: #1A1A1A;
display: flex;
flex-direction: column;
overflow: hidden;
}

.chart-controls {
position: absolute;
top: 6px;
right: 15px;
z-index: 150;
display: flex;
align-items: center;
gap: 15px;
pointer-events: none;
}

.status-message {
color: #E0E0E0;
font-size: 12px;
margin: 0;
}

.error-message {
color: red;
font-size: 12px;
margin: 0;
}

.dashboard-toolbar {
position: absolute;
top: 6px;
left: 50px;
z-index: 140;
display: flex;
align-items: center;
gap: 8px;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
}

.dropdown-menu.show {
display: block;
}

/* Reparation locale des dropdowns apres retrait de Bootstrap CSS. */
#zoomDropdownMenu,
#repoDropdownMenu,
#ustSpreadsDropdownMenu {
margin: 0;
list-style: none;
}

#zoomDropdownMenu > li,
#repoDropdownMenu > li,
#ustSpreadsDropdownMenu > li {
margin: 0;
padding: 0;
list-style: none;
}

#zoomDropdownMenu .dropdown-item,
#repoDropdownMenu .dropdown-item,
#ustSpreadsDropdownMenu .dropdown-item {
display: block;
width: 100%;
box-sizing: border-box;
border: 0;
background-color: transparent;
text-align: left;
white-space: nowrap;
}

#zoomDropdownButton,
#repoDropdownButton,
#ustSpreadsDropdownButton,
.context-spread-controls button {
cursor: pointer;
padding: 4px 10px;
border: 1px solid #E0E0E0;
border-radius: 0;
background-color: transparent;
color: #E0E0E0;
font-size: 12px;
font-weight: bold;
transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

#zoomDropdownButton:hover,
#repoDropdownButton:hover,
#ustSpreadsDropdownButton:hover,
.context-spread-controls button:hover,
#zoomDropdownButton.active,
#repoDropdownButton.show,
#ustSpreadsDropdownButton.show,
.context-spread-controls button.active {
background-color: #E0E0E0;
color: #333333;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.dashboard-dropdown-menu {
background-color: #151315;
border: 1px solid #EAEAEA;
min-width: 200px;
padding: 4px 0;
}

.dashboard-dropdown-menu .dropdown-item {
color: #E0E0E0;
font-size: 13px;
padding: 7px 12px;
cursor: pointer;
}

#zoomDropdownMenu .dropdown-item:hover,
#repoDropdownMenu .dropdown-item:hover,
#ustSpreadsDropdownMenu .dropdown-item:hover,
.dashboard-dropdown-menu .dropdown-item:hover,
.dashboard-dropdown-menu .dropdown-item:focus {
background-color: #E0E0E0;
color: #000000;
}

.dashboard-dropdown-menu .dropdown-item.active-view {
color: #999999;
background-color: transparent;
pointer-events: none;
cursor: default;
}

.context-spread-controls {
position: absolute;
top: 6px;
right: 60px;
z-index: 140;
display: flex;
align-items: center;
gap: 8px;
}

.dashboard-module {
position: relative;
width: 100%;
flex: 1;
background-color: #1A1A1A;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
padding-top: 35px;
}

.repo-analysis-layout {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 0;
}

.chart-panel {
position: relative;
width: 100%;
background-color: #1A1A1A;
box-sizing: border-box;
}

.ust-chart-panel {
flex: 1;
min-height: 500px;
}

.main-repo-chart {
flex: 0 0 55vh;
min-height: 350px;
}

.small-chart {
flex: 1;
min-height: 200px;
}

.spread-buttons-container {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
padding: 0;
background-color: #1A1A1A;
border-radius: 6px;
margin: 15px auto;
width: fit-content;
border: 1px solid #444;
overflow: hidden;
z-index: 10;
}

.spread-btn {
cursor: pointer;
padding: 8px 40px;
border: none;
border-right: 1px solid #444;
background-color: #151315;
color: #BFC5CA;
font-size: 11px;
font-weight: bold;
transition: all 0.2s;
border-radius: 0;
margin: 0;
}

.spread-btn:last-child {
border-right: none;
}

.spread-btn:hover {
background-color: #2b3035;
color: #FFF;
}

.spread-btn[data-spread="P1"].active {
background-color: var(--color-bgcr-p1);
color: #1A1A1A;
}

.spread-btn[data-spread="P25"].active {
background-color: var(--color-bgcr-p25);
color: #1A1A1A;
}

.spread-btn[data-spread="P75"].active {
background-color: var(--color-bgcr-p75);
color: #1A1A1A;
}

.spread-btn[data-spread="P99"].active {
background-color: var(--color-bgcr-p99);
color: #1A1A1A;
}

.chart-panel canvas {
width: 100% !important;
height: 100% !important;
display: block;
}

.chart-panel canvas.zoom-enabled {
cursor: grab;
}

.chart-panel canvas.tooltip-dragging {
cursor: grabbing;
}

.chart-panel canvas.tooltip-pointer {
cursor: pointer !important;
}

#infoIconContainer {
position: fixed;
left: 4%;
bottom: 4%;
z-index: 160;
}

#infoIcon {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #000099;
color: #FFD700;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
font-family: Georgia, serif;
font-style: italic;
cursor: help;
border: 1px solid #FFD700;
transition: background-color 0.2s, transform 0.2s;
}

#infoIcon:hover {
background-color: #000099;
transform: scale(1.05);
}

#infoTooltip {
position: fixed;
top: 78%;
right: 73%;
bottom: auto;
left: auto;
background-color: #1C1C1E;
border: 1px solid #FFFFFF;
padding: 15px;
width: 280px;
color: #E5E5EA;
font-size: 13px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
z-index: 161;
}

#infoTooltip p {
margin: 0 0 8px 0;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-bottom: 0;
}

#infoTooltipText {
line-height: 1.45;
color: #D0D0D0;
}

@media (max-width: 760px) {
.dashboard-toolbar {
left: 10px;
right: 10px;
flex-wrap: wrap;
}

.context-spread-controls {
top: 40px;
left: 10px;
right: auto;
flex-wrap: wrap;
}

.chart-controls {
top: 75px;
right: 10px;
left: auto;
}
}

.dispersion-module {
padding-top: 35px;
overflow: hidden;
}

.dispersion-windows {
position: relative;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
row-gap: 8px;
min-height: 0;
overflow: hidden;
}

.dispersion-overlay-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
pointer-events: none;
}

.dispersion-window {
position: relative;
width: 100%;
flex: 1 1 0;
min-height: 0;
display: flex;
box-sizing: border-box;
border-bottom: 0;
background-color: #1A1A1A;
overflow: hidden;
}

.dispersion-window:last-child {
border-bottom: 0;
}

.dispersion-window-hidden {
display: none;
}

.dispersion-window-expanded {
flex: 1 1 100%;
border-bottom: 0;
}

.dispersion-chart-panel {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}

.dispersion-split-stack {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}

.dispersion-subchart {
height: auto;
}

.dispersion-subchart-range {
flex: 1.15 1 0;
border-bottom: 1px solid #333333;
}

.dispersion-subchart-iqr {
flex: 0.85 1 0;
border-top: 0;
}

.dispersion-window-toggle {
position: absolute;
top: 7px;
right: 62px;
z-index: 20;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #666666;
border-radius: 0;
background-color: #151315;
color: var(--chart-text-color);
font-size: 17px;
line-height: 1;
font-weight: bold;
cursor: pointer;
}

.dispersion-window-toggle:hover {
background-color: #E0E0E0;
color: #333333;
}

@media (max-width: 760px) {
.dispersion-window-toggle {
top: 6px;
right: 50px;
}
}

.analysis-stack-module {
padding-top: 35px;
overflow: hidden;
}

.analysis-windows {
position: relative;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}

.analysis-overlay-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
pointer-events: none;
}

.analysis-window {
position: relative;
width: 100%;
flex: 1 1 0;
min-height: 0;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid #444444;
background-color: #1A1A1A;
overflow: hidden;
}

.analysis-window:last-child {
border-bottom: 0;
}

.analysis-chart-panel {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}

#volumeModuleContainer .analysis-windows {
display: grid;
grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
row-gap: 0;
}

#volumeModuleContainer .analysis-window {
min-height: 0;
height: auto;
border-bottom: 0;
}

#stressModuleContainer .analysis-windows {
row-gap: 8px;
}

#stressModuleContainer .analysis-window {
border-bottom: 0;
}