/* css/components/histogram.css */
/* Styles specific to the histogram display */

.histogram-container {
    display: flex; 
    align-items: flex-end;
    height: 100%;  /* Fill the .cell-viz-area height */
    width: 100%;   /* Fill the .cell-viz-area width */
    margin-left: 0; 
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 2px; /* Space for bars not to touch top if border added there */
    box-sizing: border-box;
    background-color: #fdfdfd; /* Light background for the histogram area */
}

.histogram-bar {
    background-color: #3273dc; /* Bulma's primary color */
    margin-right: 1px; /* Space between bars */
    flex-basis: 3px; /* Default width of a bar if not growing */
    flex-grow: 1;    /* Allow bars to share space in full-width */
    min-width: 1px;  /* Prevent bars from disappearing */
}
.histogram-bar:last-child {
    margin-right: 0;
}

/* Styles for full-width histograms */
g-cell[full-width-active] .cell-viz-area .histogram-container, 
g-ref[full-width-active] .cell-viz-area .histogram-container {
    /* height and width are already 100% of .cell-viz-area, 
       and .cell-viz-area gets its specific full-width dimensions.
       So, no specific override needed here for .histogram-container itself
       if .cell-viz-area is correctly sized. */
    /* margin-top: 5px; This margin is now on .cell-viz-area for full-width */
}

/* In full-width, bars will grow to fill the container. 
   No specific change needed for .histogram-bar itself for full-width height,
   as its height is controlled by its content (which is set by JS).
   The container height dictates the available space.
*/