/* components-ui.css */
/* Styles for various UI components like tooltips, message boxes, stats, graphs */

/* Tooltip styles */
.tooltip {
    position: relative; /* For positioning the tooltiptext */
    display: inline-flex; /* Align icon and text nicely if tooltip has direct text */
    align-items: center; /* Vertically align icon and text */
    cursor: help; /* Indicates help is available on hover */
    margin-left: 5px; /* Space from the element it's attached to */
    color: #b0bac8; /* Default color for tooltip icon/trigger */
}

.tooltip .tooltip-icon { /* Style for the SVG icon used as a tooltip trigger */
    stroke: #b0bac8; /* Color of the icon lines */
    width: 0.9em; /* Adjust size as needed */
    height: 0.9em;
    vertical-align: middle; /* Helps with inline alignment */
    margin-bottom: 0.05em; /* Fine-tune vertical alignment if needed */
}

.tooltip .tooltiptext { /* The actual tooltip box */
    visibility: hidden;
    width: max-content;
    max-width: 300px;
    min-width: 120px;
    text-align: left;
    border-radius: 8px;
    padding: 12px 16px;
    position: absolute;
    z-index: 10001;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size: 0.88rem;
    font-weight: 500;
    pointer-events: none;
    line-height: 1.45;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    
    /* Clean, high-contrast design */
    background-color: rgba(8, 12, 20, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(8, 12, 20, 0.96) transparent transparent transparent;
}

/* Short text optimization */
.tooltip .tooltiptext.short {
    white-space: nowrap;
    min-width: auto;
}

/* Long text handling */
.tooltip .tooltiptext.long {
    max-width: 380px;
    text-align: left;
    word-break: break-word;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.3s;
}

.tooltip:focus .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Smart positioning for screen edges */
.tooltip.tooltip-right .tooltiptext {
    left: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
    margin-left: 8px;
}

.tooltip.tooltip-right:hover .tooltiptext,
.tooltip.tooltip-right:focus .tooltiptext {
    transform: translateY(-50%) translateX(0);
}

.tooltip.tooltip-left .tooltiptext {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
    margin-right: 8px;
}

.tooltip.tooltip-left:hover .tooltiptext,
.tooltip.tooltip-left:focus .tooltiptext {
    transform: translateY(-50%) translateX(0);
}

.tooltip.tooltip-bottom .tooltiptext {
    top: 140%;
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}

.tooltip.tooltip-bottom:hover .tooltiptext,
.tooltip.tooltip-bottom:focus .tooltiptext {
    transform: translateX(-50%) translateY(0);
}

/* Arrows for different tooltip positions */
.tooltip.tooltip-right .tooltiptext::after {
    top: 50%;
    left: -5px;
    margin-left: 0;
    margin-top: -5px;
    border-color: transparent rgba(8, 12, 20, 0.96) transparent transparent;
}

.tooltip.tooltip-left .tooltiptext::after {
    top: 50%;
    right: -5px;
    left: auto;
    margin-left: 0;
    margin-top: -5px;
    border-color: transparent transparent transparent rgba(8, 12, 20, 0.96);
}

.tooltip.tooltip-bottom .tooltiptext::after {
    bottom: 100%;
    top: auto;
    border-color: transparent transparent rgba(8, 12, 20, 0.96) transparent;
}

/* Mobile-friendly tooltips */
@media (max-width: 768px) {
    .tooltip .tooltiptext {
        position: fixed;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 16px !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 24px);
        width: auto;
        font-size: 0.9rem;
        z-index: 10002;
        white-space: normal;
        text-align: center;
    }
    
    .tooltip .tooltiptext.short {
        white-space: normal;
        min-width: 100px;
    }
    
    .tooltip .tooltiptext::after {
        display: none;
    }
    
    .tooltip:hover .tooltiptext,
    .tooltip:focus .tooltiptext {
        transform: translateX(-50%) !important;
    }
    
    .tooltip {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Message Box - Enhanced Glassmorphism */
#messageBox {
    position: absolute; /* Positioned relative to #container or nearest positioned ancestor */
    top: 22px; /* Distance from the top */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    color: white; /* Default text color */
    padding: 13px 24px; /* Padding inside the message box */
    border-radius: 11px; /* Rounded corners */
    z-index: 2000; /* Very high z-index to be on top of everything */
    display: none; /* Hidden by default, shown by JavaScript */
    font-size: 0.92rem;
    text-align: center;
    min-width: 230px; /* Minimum width */
    max-width: 88%; /* Maximum width to prevent full screen width on small devices */

    /* Core glassmorphism for message box */
    background-color: rgba(30, 35, 50, 0.4); /* Default background */
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 7px 28px rgba(0, 0, 0, 0.32); /* Prominent shadow */
}

/* Contextual colors for message box */
#messageBox.error { background-color: rgba(255, 69, 58, 0.5); } /* Red for error */
#messageBox.success { background-color: rgba(48, 209, 88, 0.5); } /* Green for success */
#messageBox.warning { background-color: rgba(255, 159, 10, 0.5); } /* Orange for warning */
#messageBox.info { background-color: rgba(10, 132, 255, 0.5); } /* Blue for info */

/* Stats & Graphs Display */
.stats-text-display {
    font-size: 0.88rem;
    color: #c8d0d9; /* Muted text color for stats */
    padding: 0.3rem 0.55rem;
    background-color: rgba(22,28,40,0.30); /* Subtle background */
    border-radius: 7px;
    margin-bottom: 0.8rem; /* Space below stats display */
    text-align: center;
}

.graph-container {
    margin-top: 1.05rem; /* Space above graph container */
    padding: 0.8rem;
    border-radius: 11px;
    max-height: 175px; /* Limit graph height */
    background-color: rgba(22, 28, 40, 0.35); /* Background for graph area */
    backdrop-filter: blur(8px) saturate(110%); /* Subtle blur for graph area */
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Very subtle border */
    overflow: hidden; /* Ensure canvas inside doesn't overflow rounded corners */
}

.graph-container canvas {
    max-height: 155px; /* Ensure canvas fits within padding */
    display: block; /* Remove extra space if canvas is inline */
    width: 100%; /* Canvas should fill its container */
}