/* AG Grid Theme Customization */
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme {
    /* customise with CSS variables */
    --ag-grid-size: 5px;
    --ag-font-size: 12px;
    --ag-header-height: 26px;
    --ag-header-row-height: 26px;
    --ag-group-header-height: 26px;
    --ag-range-selection-border-color: rgb(214,51,108) !important;
    /* --ag-range-selection-border-style: dashed !important; */
    --ag-range-selection-background-color: rgb(214,51,108,0.10);
    --ag-range-selection-highlight-color: rgb(214,51,108,0.5);
    --ag-background-color: rgb(41,41,41);
    --ag-foreground-color: rgb(190,190,190);
    --ag-header-background-color: rgb(50,50,50);
    --ag-header-foreground-color: rgb(190,190,190);
    --ag-selected-row-background-color: rgba(55, 158, 255, 0.15);
    --ag-row-hover-color: rgba(62, 105, 145, 0.1);
    --ag-row-hover-foreground-color: rgb(190,190,190);
    --ag-column-hover-color: rgb(30,30,30);
    --ag-column-hover-foreground-color: rgb(190,190,190);
    --ag-odd-row-background-color: rgb(43,43,43);
    --ag-odd-row-foreground-color: rgb(190,190,190);
    --ag-popup-background-color: rgb(50,50,50);
    --ag-popup-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --ag-header-column-resize-handle-width: 0px;
    --ag-border-color: rgba(255, 255, 255, 0.2);
    --ag-border-width: 1px;
    --ag-row-border-color: rgba(255, 255, 255, 0.2);
    --ag-row-border-style: solid;
    --ag-row-border-width: 0.5px;
    --ag-border-radius: 0px;
    /* https://stackoverflow.com/questions/62371529/how-to-style-ag-grid-column-vertical-borders */
    --ag-cell-horizontal-border: var(--ag-row-border-width) var(--ag-row-border-style) var(--ag-row-border-color);
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-color: rgba(255, 255, 255, 0.2);
    /* Cell flashing color for undo/redo operations */
    --ag-value-change-value-highlight-background-color: rgba(214, 51, 108, 0.3);
}

/* Fix ag-cell-wrapper background in dark mode */
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme .ag-cell-inline-editing .ag-cell-wrapper {
    background-color: rgb(41,41,41) !important;
}

/* Registry-specific flash colors - Dark Mode */
html[data-mantine-color-scheme='dark'] #plasmid-registry--plasmid-grid.ag-theme-alpine.ag-theme-custom-theme {
    --ag-value-change-value-highlight-background-color: color-mix(in srgb, var(--mantine-color-indigo-6) 35%, transparent);
}

html[data-mantine-color-scheme='dark'] #oligo-registry--oligo-grid.ag-theme-alpine.ag-theme-custom-theme {
    --ag-value-change-value-highlight-background-color: color-mix(in srgb, var(--mantine-color-violet-6) 35%, transparent);
}


html[data-mantine-color-scheme='light'] .ag-theme-alpine.ag-theme-custom-theme {
    /* customise with CSS variables */
    --ag-grid-size: 5px;
    --ag-font-size: 12px;
    --ag-header-height: 26px;
    --ag-header-row-height: 26px;
    --ag-group-header-height: 26px;
    --ag-selected-row-background-color: rgba(55, 158, 255, 0.15);
    --ag-row-hover-color: rgba(45, 134, 190, 0.1);
    --ag-odd-row-background-color: rgb(250, 252, 255);
    --ag-column-hover-color: rgb(125,125,125,.1);
    --ag-range-selection-border-color: rgb(214,51,108);
    --ag-range-selection-background-color: rgb(214,51,108,0.10);
    /* --ag-range-selection-border-style: dashed !important; */
    --ag-range-selection-highlight-color: rgb(214,51,108,0.4);
    --ag-popup-background-color: rgb(245,245,245);
    --ag-popup-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --ag-header-column-resize-handle-width: 0px;
    --ag-border-radius: 0px;
    /* https://stackoverflow.com/questions/62371529/how-to-style-ag-grid-column-vertical-borders */
    --ag-cell-horizontal-border: var(--ag-row-border-width) var(--ag-row-border-style) var(--ag-row-border-color);
    --ag-header-column-separator-display: block;
    /* Cell flashing color for undo/redo operations */
    --ag-value-change-value-highlight-background-color: rgba(214, 51, 108, 0.3);
}

/* Registry-specific flash colors - Light Mode */
html[data-mantine-color-scheme='light'] #plasmid-registry--plasmid-grid.ag-theme-alpine.ag-theme-custom-theme {
    --ag-value-change-value-highlight-background-color: color-mix(in srgb, var(--mantine-color-indigo-5) 35%, transparent);
}

html[data-mantine-color-scheme='light'] #oligo-registry--oligo-grid.ag-theme-alpine.ag-theme-custom-theme {
    --ag-value-change-value-highlight-background-color: color-mix(in srgb, var(--mantine-color-violet-5) 35%, transparent);
}

/* Fix inline editing cell background */
.ag-theme-alpine.ag-theme-custom-theme .ag-cell.ag-cell-normal-height.ag-cell-value.ag-cell-focus.ag-cell-inline-editing {
    background-color: rgba(214, 51, 108, 0.15) !important;
    color: rgb(190, 190, 190) !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Reduce line spacing for wrapped text cells */
.ag-theme-alpine.ag-theme-custom-theme .ag-cell-wrapper {
    padding: 0px 0px !important;
    line-height: 1.5 !important;
}

/* AG Grid Cell Editor Styling */

/* Large Text Editor (Popup) - Dark Mode */
html[data-mantine-color-scheme='dark'] .ag-popup-editor {
    background-color: rgb(41, 41, 41) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Context Menu Styling - Dark Mode */
html[data-mantine-color-scheme='dark'] .ag-menu {
    background-color: rgb(50, 50, 50) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-mantine-color-scheme='dark'] .ag-menu-list {
    background-color: rgb(50, 50, 50) !important;
}

html[data-mantine-color-scheme='dark'] .ag-menu-option {
    background-color: transparent !important;
    color: rgb(190, 190, 190) !important;
}

html[data-mantine-color-scheme='dark'] .ag-menu-option:hover {
    background-color: rgba(214, 51, 108, 0.15) !important;
    color: rgb(255, 255, 255) !important;
}

html[data-mantine-color-scheme='dark'] .ag-menu-separator {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-mantine-color-scheme='dark'] .ag-large-text {
    background-color: rgb(41, 41, 41) !important;
    padding: 0 !important;
}

html[data-mantine-color-scheme='dark'] .ag-large-text-input {
    background-color: rgb(30, 30, 30) !important;
    border: none !important;
    border-radius: 4px !important;
}

html[data-mantine-color-scheme='dark'] .ag-text-area-input {
    background-color: rgb(30, 30, 30) !important;
    color: rgb(190, 190, 190) !important;
    border: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    padding: 8px !important;
}

html[data-mantine-color-scheme='dark'] .ag-text-area-input:focus {
    outline: 2px solid rgba(214, 51, 108, 0.5) !important;
    outline-offset: -2px !important;
}

/* Large Text Editor (Popup) - Light Mode */
html[data-mantine-color-scheme='light'] .ag-popup-editor {
    background-color: rgb(250, 250, 250) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html[data-mantine-color-scheme='light'] .ag-large-text {
    background-color: rgb(250, 250, 250) !important;
    padding: 0 !important;
}

html[data-mantine-color-scheme='light'] .ag-large-text-input {
    background-color: white !important;
    border: none !important;
    border-radius: 4px !important;
}

html[data-mantine-color-scheme='light'] .ag-text-area-input {
    background-color: white !important;
    color: rgb(33, 33, 33) !important;
    border: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    padding: 8px !important;
}

html[data-mantine-color-scheme='light'] .ag-text-area-input:focus {
    outline: 2px solid rgba(214, 51, 108, 0.5) !important;
    outline-offset: -2px !important;
}

/* Select Editor Styling */
html[data-mantine-color-scheme='dark'] .ag-select,
html[data-mantine-color-scheme='dark'] .ag-rich-select {
    background-color: rgb(30, 30, 30) !important;
    color: rgb(190, 190, 190) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-mantine-color-scheme='dark'] .ag-rich-select-list {
    background-color: rgb(41, 41, 41) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-mantine-color-scheme='dark'] .ag-rich-select-row {
    background-color: rgb(41, 41, 41) !important;
    color: rgb(190, 190, 190) !important;
}

html[data-mantine-color-scheme='dark'] .ag-rich-select-row:hover {
    background-color: rgba(214, 51, 108, 0.2) !important;
}

html[data-mantine-color-scheme='dark'] .ag-rich-select-row-selected {
    background-color: rgba(214, 51, 108, 0.3) !important;
}

/* Popup in modals needs higher z-index */
.mantine-Modal-root .ag-popup-editor {
    z-index: 10002 !important;
}

/* Text Input Editor Styling */
html[data-mantine-color-scheme='dark'] .ag-input-field-input {
    background-color: rgb(30, 30, 30) !important;
    color: rgb(190, 190, 190) !important;
    padding: 4px 8px !important;
}

html[data-mantine-color-scheme='dark'] .ag-input-field-input:focus {
    outline: 2px solid rgba(214, 51, 108, 0.5) !important;
    outline-offset: -2px !important;
    border-color: transparent !important;
}

html[data-mantine-color-scheme='light'] .ag-input-field-input {
    background-color: white !important;
    color: rgb(33, 33, 33) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 4px 8px !important;
}

html[data-mantine-color-scheme='light'] .ag-input-field-input:focus {
    outline: 2px solid rgba(214, 51, 108, 0.5) !important;
    outline-offset: -2px !important;
    border-color: transparent !important;
}


.ag-theme-alpine.ag-theme-custom-theme .ag-details-row {
    padding: 20px !important;
    padding-left: 59px !important;
}


.ag-theme-alpine.ag-theme-custom-theme .ag-cell.ag-cell-auto-height.ag-cell-wrap-text.ag-cell-last-left-pinned.ag-cell-focus.indigo-text.ag-cell-inline-editing {
    background-color: transparent !important;
}

.ag-theme-alpine.ag-theme-custom-theme .ag-cell.ag-cell-auto-height.ag-cell-wrap-text.ag-cell-last-left-pinned.ag-cell-focus.violet-text.ag-cell-inline-editing {
    background-color: transparent !important;
}

/* Master-Detail Row Styling - Dark Mode */
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row,
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row-auto-height,
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme .ag-full-width-row {
    background-color: color-mix(in srgb, var(--mantine-color-pink-1) 5%, transparent) !important;
    border-top: 0px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 0px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}


/* Master-Detail Row Styling - Light Mode */
html[data-mantine-color-scheme='light'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row,
html[data-mantine-color-scheme='light'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row-auto-height,
html[data-mantine-color-scheme='light'] .ag-theme-alpine.ag-theme-custom-theme .ag-full-width-row {
    background-color: color-mix(in srgb, var(--mantine-color-pink-2) 3%, transparent) !important;
    /* border-top: 0px solid color-mix(in srgb, var(--mantine-color-indigo-4) 15%, transparent) !important;
    border-bottom: 0px solid color-mix(in srgb, var(--mantine-color-indigo-4) 15%, transparent) !important; */
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--mantine-color-pink-2) 10%, transparent) !important;
}

/* Detail grid border radius */
.ag-theme-alpine.ag-theme-custom-theme .ag-details-row .ag-root-wrapper.ag-ltr.ag-layout-auto-height {
    border-radius: 7px !important;
    overflow: hidden !important;
}

/* Remove min-height (default - 150px) restriction on detail grid viewport to allow auto-height */
.ag-center-cols-viewport {
    min-height: unset !important;
}

/* Master-Detail Arrow Styling */
.ag-theme-alpine.ag-theme-custom-theme .ag-icon.ag-icon-tree-closed,
.ag-theme-alpine.ag-theme-custom-theme .ag-icon.ag-icon-tree-open {
    font-size: 17px !important;
    padding-left: 4px;
    font-weight: 800 !important;
}

.ag-theme-alpine.ag-theme-custom-theme .ag-icon.ag-icon-tree-open {
    color: var(--mantine-color-indigo-5) !important
}

/* set hover color for expand/collapse icons */
.ag-theme-alpine.ag-theme-custom-theme .ag-icon.ag-icon-tree-closed:hover,
.ag-theme-alpine.ag-theme-custom-theme .ag-icon.ag-icon-tree-open:hover {
    color: var(--mantine-color-indigo-8) !important
}

/* Detail Grid (Fragment Grid) Specific Styling - Dark Mode */
html[data-mantine-color-scheme='dark'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row .ag-root-wrapper {
    --ag-background-color: color-mix(in srgb, var(--mantine-color-pink-3) 13%, rgb(41,41,41));
    --ag-odd-row-background-color: color-mix(in srgb, var(--mantine-color-pink-3) 13%, rgb(41,41,41));
    --ag-row-hover-color: color-mix(in srgb, var(--mantine-color-pink-4) 10%, rgba(62, 105, 145, 0.1));
    --ag-header-background-color: color-mix(in srgb, var(--mantine-color-pink-3) 15%, rgb(50,50,50));
}

/* Detail Grid (Fragment Grid) Specific Styling - Light Mode */
html[data-mantine-color-scheme='light'] .ag-theme-alpine.ag-theme-custom-theme .ag-details-row .ag-root-wrapper {
    --ag-background-color: color-mix(in srgb, var(--mantine-color-pink-4) 10%, white);
    --ag-odd-row-background-color: color-mix(in srgb, var(--mantine-color-pink-4) 10%, white);
    --ag-row-hover-color: color-mix(in srgb, var(--mantine-color-pink-5) 12%, white);
    --ag-header-background-color: color-mix(in srgb, var(--mantine-color-pink-4) 13%, white);
    --ag-border-color: rgba(0, 0, 0, 0.1);
}

/* Remove borders from bottommost row and rightmost column in fragment detail grid */
.ag-theme-alpine.ag-theme-custom-theme .ag-details-row .ag-row-last {
    border-bottom: none !important;
}
/* .ag-theme-alpine.ag-theme-custom-theme .ag-details-row .ag-column-last {
    border-right: none !important;
} */

/* Oligo sequence cell styling - prevent prefix/suffix orphaning */
.ag-theme-alpine.ag-theme-custom-theme .oligo-sequence-cell {
    white-space: pre-wrap !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
}

/* Description cell styling - 2-line text truncation with ellipsis */
.ag-theme-alpine.ag-theme-custom-theme .description-cell {
    /* display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; */
    text-wrap: wrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    font-size: 12px !important;
}