/* resources/css/filament/admin/apexcharts-custom.css */

/* Target the main tooltip container */
.apexcharts-tooltip {
    max-width: 500px !important; /* You can adjust this width */
    
    /* === THIS IS THE FIX === */
    /* Apply the grid layout to the tooltip container itself */
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr!important; /* Creates 2 columns */
    gap: 5px 20px !important; /* Space between rows and columns */
}

/* We also need to make the title span across both columns */
.apexcharts-tooltip-title {
    grid-column: 1 / -1 !important; /* Makes the title take up the full width */
    text-align: center; /* Optional: center the title */
    margin-bottom: 5px;
}

/* Ensure each series item fits correctly within a grid cell */
.apexcharts-tooltip-series-group {
    display: flex !important;
    align-items: center;
    /* Remove default padding that might cause overflow */
    padding: 0 !important; 
}
.apexcharts-tooltip-y-group{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.apexcharts-tooltip-marker {
    display: inline-block;
    position: relative;
    width: 9px;
    height: 9px;
}
.apexcharts-tooltip-text{
    font-size: 11px !important;
}