/* ============================================================
   09-ag-grid.css — AG Grid theme overrides

   Maps AG Grid Balham surfaces to the app's CSS-variable
   colour scheme defined in 00-variables.css.
   ============================================================ */

/* ---- Cell & header alignment -------------------------------- */

/* Vertically center cell content within variable-height rows */
.ag-theme-balham .ag-cell-wrapper {
    align-items: center;
}

/* ---- Header — navy background, white text ------------------- */

.ag-theme-balham .ag-header {
    background-color: var(--primary-color);
    border-bottom: 2px solid var(--primary-dark);
}

.ag-theme-balham .ag-header-cell {
    color: #fff;
    font-weight: 600;
}

/* Header hover — slightly lighter navy */
.ag-theme-balham .ag-header-cell:hover {
    background-color: var(--secondary-color) !important;
}

/* Sort / filter icons — white to match header text */
.ag-theme-balham .ag-header-icon .ag-icon {
    color: #fff;
}

/* Sort arrows (ascending / descending indicators) */
.ag-theme-balham .ag-sort-indicator-icon .ag-icon {
    color: #fff;
}

/* Filter menu button (hamburger/funnel in header) */
.ag-theme-balham .ag-header-cell-menu-button .ag-icon {
    color: #fff;
}

/* Active filter indicator — amber so it stands out on navy */
.ag-theme-balham .ag-header-cell-filtered .ag-icon {
    color: var(--accent-color);
}

/* Sorted column header — subtle darker cue */
.ag-theme-balham .ag-header-cell-sorted-asc,
.ag-theme-balham .ag-header-cell-sorted-desc {
    background-color: var(--primary-dark);
}

/* ---- Row stripes, hover & selection ------------------------- */

.ag-theme-balham .ag-row-odd {
    background-color: var(--bg-body);
}

.ag-theme-balham .ag-row-even {
    background-color: var(--bg-surface);
}

.ag-theme-balham .ag-row-selected {
    background-color: color-mix(in srgb, var(--secondary-color) 15%, #fff);
}

.ag-theme-balham .ag-row-hover {
    background-color: color-mix(in srgb, var(--secondary-color) 10%, #fff) !important;
}

/* ---- Pagination panel --------------------------------------- */

.ag-theme-balham .ag-paging-panel {
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   SVG overlay — click-to-enlarge lightbox for molecule images
   ============================================================ */
.svg-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.svg-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 16px;
}

.svg-overlay-close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    user-select: none;
}

/* ---- Compare panels — query beside the clicked result -------- */

.svg-compare {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: 94vw;
    max-height: 88vh;
    /* Panel clicks no longer close the overlay (SMILES must be selectable). */
    cursor: default;
}

.svg-compare-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.svg-compare-label {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.svg-compare-smiles {
    max-width: 100%;
    max-height: 4.5em;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    word-break: break-all;
    user-select: text;
}

/* Two panels split the viewport.  :not(:only-child) outranks the
   .svg-overlay img rule above, so a lone result (no query structure on
   the page) keeps the original 90vw / 85vh size. */
.svg-compare-panel:not(:only-child) img {
    max-width: 46vw;
    max-height: 70vh;
}

/* ---- Stacked — wide structures use the full width ----------- */

/* dashAgGridComponentFunctions.js adds the class when a structure is wider
   than 2.5:1: a 1250x200 reaction draws 644 px wide side by side but 1232 px
   stacked.  align-items overrides the flex-start above — in a column the
   panel would otherwise size to fit-content, so the longer of the two SMILES
   captions would shift its image up to ~40 px against the other. */
.svg-compare-stacked {
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
}

/* Same caps as the mobile block below, so the two never disagree when a
   reaction is stacked on a phone. */
.svg-compare-stacked .svg-compare-panel:not(:only-child) img {
    max-width: 88vw;
    max-height: 32vh;
}

/* Wide structures stack at any width (above); below tablet everything does. */
@media (max-width: 768px) {
    .svg-compare {
        flex-direction: column;
        overflow-y: auto;
    }

    .svg-compare-panel:not(:only-child) img {
        max-width: 88vw;
        max-height: 32vh;
    }
}

.cell-wrap-dash-ag-grid{
    word-break: normal !important;
    white-space: normal !important;
    line-height:120% !important;
    /*padding: 10 !important;*/
    font-size: 10px !important;
}

/* ---- Sequence cells ----------------------------------------- */

/* Shared class for protein/amino-acid sequence columns, so every tool
   renders sequences identically. Sequences can be hundreds of residues,
   so they are truncated to a single line to keep row heights uniform;
   build_ag_grid sets a tooltipField on every column, so the full sequence
   shows on hover, and enableCellTextSelection keeps it copy-pasteable. */
.ag-cell-sequence {
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}