/* Custom styles for precise alignment */
.td_data_aligned {
    /* Combines data and time into one logical cell, with internal alignment */
    white-space: nowrap; /* Prevents wrapping within the data/time block */
    text-align: left; /* Default alignment for the cell */
    padding-right: 5px; /* Adjust spacing between today and yesterday columns, match .date-range-header */
}

.val-box {
    display: inline-block; /* Allows setting width and alignment */
    min-width: 90px; /* Adjust this width based on your widest data value + unit (e.g., "100.0 W/m2", "78.5 nm"). You'll need to test what looks best. */
    text-align: right; /* Aligns the value and unit to the right within its container */
    vertical-align: top; /* Aligns with the top of the time if it wraps */
    padding-right: 5px; /* Space between value and time */
}

.timedate-box {
    display: inline-block; /* Allows time to sit next to the value */
    text-align: left; /* Aligns time to the left within its container */
    vertical-align: center; /* Aligns with the top of the value if it wraps */
    color: #7d7d7d; /* New: Make the font grey */
    font-size: 0.9em; /* New: Make the font size smaller */
}

/* Style for the date range headers to align them with the data */
/* This now combines the `tableseparator_temp` and `.date-range-container` logic */
.tableseparator_temp.date-range-container {
    text-align: left; /* Default alignment for the entire cell */
    padding-right: 5px; /* Same padding as the data cells */
}
.date-range-text {
    display: inline-block;
    min-width: 90px; /* IMPORTANT: This needs to match the val-box's width to align correctly */
    text-align: right; /* Align the date range text to the right within its container */
    padding-right: 5px; /* Match space between value and time */
}