/* 1. Header Styling */
.ag-theme-alpine {
    --ag-header-background-color: #f8f9fa; /* Light grey modern header */
    --ag-header-foreground-color: #333;    /* Darker, bolder text */
    --ag-header-cell-hover-background-color: #ececec;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif; /* Modern font */
}

/* 2. Bold the header text */
.ag-theme-alpine .ag-header-cell-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* 3. Alternating Row Colors (Zebra Stripes) */
.ag-theme-alpine .ag-row-odd {
    background-color: #fafbfc;
}

/* 4. Highlight row on hover */
.ag-theme-alpine .ag-row-hover {
    background-color: #f1f7ff !important; /* Soft blue highlight */
}

/* 5. Customizing the check-box color to match your blue button */
.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {
    color: #007bff;
}

/* Makes the resize handle visible as a light vertical line */
ag-header-row-column .ag-header-cell::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    background-color: #dde2eb; /* Adjust color to match your theme */
    cursor: col-resize;
}
/* Optional: Make it change color when hovered */
.ag-header-cell:hover::after {
    background-color: #2196f3;
    width: 3px;
}