body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: Arial, sans-serif;
    color: white;
    box-sizing: border-box;
    overflow: hidden;}

.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100vh;
    width: 100vw;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    background-color: #000;}

.module-window {
    position: relative;
    background-color: #1A1A1A;
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;}

.module-window.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
    border: none;}

.window-header {
    height: 25px;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5px;
    border-bottom: 1px solid #444;
    cursor: pointer;
    user-select: none;}

.window-controls {
    display: flex;
    align-items: center;}

.btn-fs {
    background: transparent;
    color: #ccc;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color 0.2s, background-color 0.2s;}

.btn-fs:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);}

.fs-icon {
    width: 14px;
    height: 14px;}

.module-content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;}

.header-info-bubble {
    position: absolute;
    top: 6px;
    right: 10px;
    left: auto;
    transform: none;
    background-color: #ffff00;
    color: #000;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 50;
    pointer-events: none;
    white-space: nowrap;}

.header-info-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    left: auto;
    transform: none;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #ffff00 transparent;}

.module-window.fullscreen .header-info-bubble {
    display: none;}

.chart-wrapper {
    position: relative;
    width: 100%;}

.top-chart {
    height: calc(60% - 3px);
    box-sizing: border-box;}

.bottom-chart {
    height: calc(40% - 3px);
    box-sizing: border-box;}

.chart-separator {
    height: 6px;
    background-color: #2a2a2a;
    border-top: 1px solid #111;
    border-bottom: 1px solid #444;
    width: 100%;}

.mod3-content-split,
.mod4-content-split {
    background-color: #000;
    padding: 4px;
    gap: 4px;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;}

.mod3-inner-window,
.mod4-inner-window {
    background-color: #1A1A1A;
    border: 1px solid #333;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;}

.mod3-inner-window canvas,
.mod4-inner-window canvas {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;}

.mod3-top-chart,
.mod4-top-chart {
    flex: 6;}

.mod3-bottom-chart,
.mod4-bottom-chart {
    flex: 4;}

.mod3-controls,
.mod4-controls {
    position: absolute;
    right: 3%;
    top: 2.5%;
    z-index: 20;
    display: flex;
    gap: 8px;
    pointer-events: auto;}

.btn-zoom.mod3-zoom,
.btn-zoom.mod4-zoom {
    position: static;}

.mod2-header-controls {
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 30;
    pointer-events: none;}

.mod2-header-controls > * {
    pointer-events: auto;}

.mod2-custom-select {
    position: relative;
    font-size: 12px;
    font-weight: bold;
    color: #FFF;
    user-select: none;}

.mod2-select-trigger {
    background-color: #111; 
    border: 1px solid #555;
    border-radius: 4px;
    padding: 8px 14px; 
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    transition: border-color 0.2s, background-color 0.2s;}

.mod2-custom-select:hover .mod2-select-trigger {
    border-color: #888;
    background-color: #2a2a2a;}

.mod2-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background-color: #111;
    border: 1px solid #888;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;}

.mod2-select-options.show {
    display: block;}

.mod2-option {
    padding: 20px 14px; 
    cursor: pointer;
    transition: background-color 0.2s;
    border-left: 6px solid transparent; 
    border-bottom: 1px solid #222;}

.mod2-option:last-child {
    border-bottom: none;}

.mod2-option:hover {
    background-color: #333;}

.mod2-option[data-value="short"] { border-left-color: #1cc080;}
.mod2-option[data-value="percentile"] { border-left-color: #ff6600; }

.mod2-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px; 
    position: absolute;
    top: 0; 
    left: 0;
    padding-top: 45px; 
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;}

.mod2-chart-row,
.mod2-chart-row-half {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #111; 
    box-sizing: border-box;
    position: relative;
    overflow: hidden;}

.mod2-chart-title {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;                
    font-weight: bold;              
    font-family: Arial, sans-serif; 
    color: #ccc;                    
    z-index: 10;
    pointer-events: none;}

.chart-overlay-header {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 20;
    pointer-events: none;}

.chart-overlay-title {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #E0E0E0;
    background: rgba(26, 26, 26, 0.6);
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: auto;}

.module-window.fullscreen .mod2-chart-title,
.module-window.fullscreen .chart-overlay-title {
    font-size: 14px;}

.btn-zoom {
    position: absolute;
    right: 55px; 
    top: 0;
    border: 1px solid #CCCCCC;
    background-color: transparent ;
    color: #ffffff;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s, color 0.2s;}

.btn-zoom:hover {
    background-color: #ffffff;
    color: #000000;}

.module-window:not(.fullscreen) .btn-zoom {
    display: none;}

.chart-grab {
    cursor: grab;}

.chart-grabbing {
    cursor: grabbing !important;}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;}

.mod1-logo-top { position: absolute; bottom: 8%; right: 3%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }
.mod1-logo-bottom { position: absolute; bottom: 3%; right: 3%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }
.mod2-logo-view-short-1 { position: absolute; bottom: 8%; right: 3%; color: #CCCCCC; font-size: 12px; font-weight: bold; z-index: 10; pointer-events: none; }
.mod2-logo-view-short-2 { position: absolute; bottom: 9%; right: 3%; color: #CCCCCC; font-size: 12px; font-weight: bold; z-index: 10; pointer-events: none; }
.mod2-logo-view-percentile-1 { position: absolute; bottom: 7%; right: 3%; color: #CCCCCC; font-size: 12px; font-weight: bold; z-index: 10; pointer-events: none; }
.mod3-logo-top { position: absolute; bottom: 8%; right: 2%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }
.mod3-logo-bottom { position: absolute; bottom: 12%; right: 2%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }
.mod4-logo-top { position: absolute; bottom: 4%; right: 2%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }
.mod4-logo-bottom { position: absolute; bottom: 12%; right: 2%; color: #CCCCCC; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 10; }

.mod1-logo-top, .mod1-logo-bottom, 
.mod2-logo-view-short-1, .mod2-logo-view-short-2, .mod2-logo-view-percentile-1, 
.mod3-logo-top, .mod3-logo-bottom, 
.mod4-logo-top, .mod4-logo-bottom {
    display: none !important;}

.module-window.fullscreen .mod1-logo-top, 
.module-window.fullscreen .mod1-logo-bottom, 
.module-window.fullscreen .mod2-logo-view-short-1, 
.module-window.fullscreen .mod2-logo-view-short-2, 
.module-window.fullscreen .mod2-logo-view-percentile-1, 
.module-window.fullscreen .mod3-logo-top, 
.module-window.fullscreen .mod3-logo-bottom, 
.module-window.fullscreen .mod4-logo-top, 
.module-window.fullscreen .mod4-logo-bottom {
    display: block !important;}

.mod2-custom-info,
.mod3-custom-info,
.mod4-custom-info {
    position: absolute;
    bottom: 7%;
    left: 5%;
    z-index: 40;
    display: none;}

.module-window.fullscreen .mod2-custom-info,
.module-window.fullscreen .mod3-custom-info,
.module-window.fullscreen .mod4-custom-info {
    display: block;}

.info-bubble-icon {
    width: 26px;
    height: 26px;
    background-color: #0000FF;
    border: 1px solid #FFFF00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFF00;
    font-weight: bold;
    font-style: italic;
    font-family: serif;
    font-size: 14px;
    cursor: pointer;}

.info-bubble-text {
    display: none;
    position: absolute;
    bottom: 35px;
    left: 0;
    background-color: rgba(26, 26, 26, 0.95);
    border: 1px solid #CCCCCC;
    padding: 12px;
    border-radius: 4px;
    width: 250px;
    font-size: 12px;
    line-height: 1.4;
    color: #FFF;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);}

.mod2-custom-info:hover .info-bubble-text,
.mod3-custom-info:hover .info-bubble-text,
.mod4-custom-info:hover .info-bubble-text {
    display: block;}

.draggable-tooltip {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 200px;
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid #EAEAEA;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);}

.tooltip-header {
    height: 20px;
    background: rgba(255,255,255,0.1);
    cursor: move;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    color: #aaa;
    border-bottom: 1px solid #444;}

.tooltip-body {
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.8;}

.tt-row { margin-bottom: 4px; }
.tt-date { color: #FFF; margin-bottom: 3px; font-size: 12px; }
.tt-date-center { color: #FFF; margin-bottom: 3px; font-size: 12px; text-align: center; }
.tt-center { text-align: center; }
.tt-val-close { color: #00df76; }
.tt-val-sar { color: #dc3545; }
.tt-val-adx { color: #FFD700; }
.tt-val-adxr { color: #00BFFF; }
.tt-divider { 
    margin: 8px 0; 
    border-top: 1px dashed #888; 
    padding-top: 4px; }
.tt-mt { margin-top: 3px; }

.c-white { color: #ffffff; }
.c-green { color: #00df76; }
.c-red { color: #ff0000; }
.c-blue { color: #00BFFF; }
.c-yellow { color: #FFD700; }
.c-cyan { color: #00FFFF; }

#loading-overlay, 
#error-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 10000;}

#error-overlay {
    color: #e74c3c;
    font-weight: bold;}

.hidden {
    display: none !important;}