/*
 * style.css
 * Family Catalogue
 *
 * This file is for any custom CSS styles that are
 * difficult or impossible to do with Tailwind.
 * For now, it can be empty.

 /*
 * style.css
 * Family Catalogue
 *
 * This file is for any custom CSS styles that are
 * difficult or impossible to do with Tailwind.
 */

/* --- Image Popover for Table View --- */
#image-popover {
    position: fixed;
    display: none;
    z-index: 100; /* High z-index */
    border: 3px solid #fff;
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    pointer-events: none; /* Let mouse events pass through */
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
}

#image-popover img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Sticky Table Header --- */
.sticky-header th {
    position: sticky;
    top: 0;
    /* * Tailwind's 'bg-gray-50' is 'rgb(249 250 251 / var(--tw-bg-opacity))'
     * We set a solid color to prevent seeing rows scroll underneath.
     * We also add 'z-index: 10' to ensure it's above the table rows.
     */
    background-color: #F9FAFB; /* This is 'bg-gray-50' */
    z-index: 10;
}

/* * Add a small border below the sticky header 
 * to separate it from the scrolling content.
 */
.sticky-header th::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #E5E7EB; /* 'border-gray-200' */
}
 */