/* assets/style.css */

/* --- New Row Container for Value + Badges --- */
.metric-row-container {
    /* Inline styles in JS set: display:flex, align-items:center, justify-content:space-between, width:100%, height:100% */
    padding: 0 4px; /* Add some horizontal padding within the cell */
    /* Base font size for the cell content - Adjust this value to make text larger/smaller */
    font-size: 1.0em; /* Default size (or adjust e.g., 1.1em, 1.2em) */
    line-height: 1.2;
}

/* --- Styling for the individual part wrappers (created in JS) --- */
.metric-part-wrapper {
    /* Inline styles in JS set width and text-align */
    display: inline-block; /* Allow them to sit side-by-side in the flex container */
    vertical-align: middle; /* Align vertically */
    margin: 0 1px; /* Add tiny horizontal space between wrappers */
}

/* Optional: Specific wrapper styling if needed */
.metric-value-wrapper {
    /* Add specific styles for the value wrapper if needed */
    padding-right: 5px; /* Add some space between the value and the next element (grade) */
    font-weight: 550; /* Make metric values bolder for better emphasis */
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif; /* Friendly proportional font */
    font-variant-numeric: tabular-nums; /* Ensure digits align (tabular figures) */
}
.metric-grade-wrapper {
    /* Add specific styles for the grade wrapper if needed */
}
.metric-rank-wrapper {
    /* Add specific styles for the rank wrapper if needed */
}

/* --- Basic Badge Styling (Include ONLY if NOT using Bootstrap CSS) --- */
/* If you *are* using Bootstrap 5+, you likely don't need this section */
.badge {
    display: inline-block;
    /* --- Badge Size --- */
    /* Adjust these values to make badges larger or smaller */
    padding: .45em .65em; /* Increase padding */
    font-size: .85em;     /* Increase font size (relative to container font size) */
    font-weight: 700;
    line-height: 1;
    color: #fff;          /* Default text color (can be overridden) */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle; /* Better alignment within flex row */
    border-radius: .375rem; /* Common border radius */
}

/* --- Specific Styling for Grade and Rank Badges --- */
.metric-grade-badge,
.metric-rank-badge {
    /* Existing styles remain */
    /* ... existing code ... */
    position: relative;               /* Allow pseudo-element overlay */
    overflow: hidden;                 /* Clip shine overlay */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15),
                inset 0 1px 0 rgba(255,255,255,0.3); /* Subtle depth */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Shiny overlay (very cheap to render) */
.metric-grade-badge::before,
.metric-rank-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    pointer-events: none;             /* Don't block mouse */
}

/* Simple hover interaction */
.metric-grade-badge:hover,
.metric-rank-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.35);
}

/* --- AG Grid Cell Alignment --- */
/* Target AG Grid's default cell wrapper to vertically center our content */
.ag-cell {
    display: flex !important;           /* Use flexbox for the cell itself */
    align-items: center !important;     /* Vertically center the direct child (metric-row-container) */
    /* Optional: Remove default cell padding if it interferes with alignment */
    /* padding-top: 0 !important; */
    /* padding-bottom: 0 !important; */
}

/* --- Price Column Right Alignment --- */
.price-column-right-align {
    justify-content: flex-end !important;  /* Right align content in flexbox */
    text-align: right !important;          /* Right align text */
}

.price-column-right-align .ag-cell-value {
    text-align: right !important;          /* Ensure the cell value is right aligned */
}