/* ==========================================================================
   INS.AgGrid — Styles for InsAgGrid component and InsSetFilter.
   Include this CSS in your host application.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid container
   -------------------------------------------------------------------------- */

.ins-ag-grid {
    /* DevExpress Office White parity: use the app font, a white canvas and the
       same neutral border used by DxGrid instead of Quartz's grey defaults. */
    --ins-ag-grid-font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ins-ag-grid-border-color: #ced4da;
    --ins-ag-grid-surface: #ffffff;
    --ins-ag-grid-header-background: #ffffff;
    --ag-background-color: var(--ins-ag-grid-surface);
    --ag-foreground-color: var(--color-text, #212529);
    --ag-accent-color: var(--color-primary, #0d6efd);
    --ag-border-color: var(--ins-ag-grid-border-color);
    --ag-header-background-color: var(--ins-ag-grid-header-background);
    --ag-odd-row-background-color: transparent;
    --ag-row-hover-color: rgba(13, 110, 253, 0.06);
    --ag-selected-row-background-color: rgba(13, 110, 253, 0.12);
    --ag-column-border: solid 1px var(--ins-ag-grid-border-color);
    --ag-row-border: solid 1px var(--ins-ag-grid-border-color);
    --ag-header-column-border: solid 1px var(--ins-ag-grid-border-color);
    --ag-header-column-border-height: 100%;
    --ag-font-family: var(--ins-ag-grid-font-family);
    --ag-font-size: 0.875rem;
    --ag-header-font-weight: 600;
    --ag-wrapper-border-radius: 2px;
    --ag-cell-horizontal-padding: 6px;
    font-family: var(--ins-ag-grid-font-family);
}

.ins-ag-grid .ag-root-wrapper {
    background: var(--ins-ag-grid-surface);
    border-color: var(--ins-ag-grid-border-color);
    border-radius: 2px;
    font-family: var(--ins-ag-grid-font-family);
}

.ins-ag-grid .ag-cell {
    border-right: 1px solid var(--ins-ag-grid-border-color);
    box-sizing: border-box;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 4px 6px;
}

/* Match DevExpress Office White DxGrid headers: white surface, 600-weight 14px
   captions, compact 4px x 6px spacing, and full cell lines. */
.ins-ag-grid .ag-header {
    background: var(--ins-ag-grid-header-background);
    border-bottom: 1px solid var(--ins-ag-grid-border-color);
    color: var(--color-text, #212529);
}

/* AG Grid 36 paints only the flex remainder with --ag-header-background-color;
   rendered header cells are absolutely positioned and stay transparent. Paint
   the complete column row explicitly so pinned and horizontally scrolled
   headers keep the same DxGrid tint. */
.ins-ag-grid .ag-header-row-column {
    background-color: var(--ins-ag-grid-header-background);
}

.ins-ag-grid .ag-header-cell,
.ins-ag-grid .ag-header-group-cell {
    box-sizing: border-box;
    padding: 4px 6px;
}

.ins-ag-grid .ag-header-cell-label,
.ins-ag-grid .ag-header-group-cell-label {
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4285;
}

.ins-ag-grid .ag-header-icon {
    color: inherit;
    opacity: 0.78;
}

/* DxGrid keeps its filter row on the same white surface as the caption row. */
.ins-ag-grid .ag-header-row-filter,
.ins-ag-grid .ag-floating-filter {
    background: var(--ins-ag-grid-surface);
}

/* InsFloatingFilter is a lightweight custom component, so AG Grid does not
   apply its stock input chrome. Keep it borderless like the Office White
   DxGrid filter editor and let the surrounding grid lines define the cell. */
.ins-ag-grid .ag-floating-filter-body,
.ins-ag-grid .ag-floating-filter-input {
    height: 100%;
    min-width: 0;
    width: 100%;
}

.ins-ag-grid .ag-filter-input {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ag-foreground-color, #212529);
    font: inherit;
    height: 100%;
    line-height: 1.25rem;
    min-width: 0;
    outline: 0;
    padding: 0;
    width: 100%;
}

.ins-ag-grid .ag-filter-input:focus-visible {
    box-shadow: inset 0 -2px 0 var(--ag-accent-color, #0d6efd);
}

/* --------------------------------------------------------------------------
   Set Filter (Excel-style checklist)
   -------------------------------------------------------------------------- */

.ins-set-filter {
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-width: 220px;
    max-width: 320px;
    background: var(--ag-background-color, #fff);
    color: var(--ag-foreground-color, #212529);
    font-family: var(--ins-ag-grid-font-family, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 0.875rem;
    border: 1px solid var(--ag-border-color, #d5dce7);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ins-set-filter__search {
    margin-bottom: 6px;
}

.ins-set-filter__search-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--ag-border-color, #d5dce7);
    border-radius: 3px;
    font: inherit;
    background: var(--ag-background-color, #fff);
    color: var(--ag-foreground-color, #212529);
    box-sizing: border-box;
}

.ins-set-filter__select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid var(--ag-border-color, #d5dce7);
    margin-bottom: 4px;
}

.ins-set-filter__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 8px;
    color: #68717d;
    font-size: 0.875rem;
    font-style: italic;
}

.ins-set-filter__loading i {
    font-size: 1rem;
    color: var(--ag-accent-color, #0d6efd);
}

.ins-set-filter__list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 1px;
}

.ins-set-filter__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    cursor: pointer;
    border-radius: 2px;
}

.ins-set-filter__item:hover {
    background: var(--ag-row-hover-color, rgba(13, 110, 253, 0.06));
}

.ins-set-filter__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ins-set-filter__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--ag-border-color, #d5dce7);
}

.ins-set-filter__btn {
    padding: 3px 12px;
    border: 1px solid var(--ag-border-color, #d5dce7);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.875rem;
    background: transparent;
    color: var(--ag-foreground-color, #212529);
}

.ins-set-filter__btn--ok {
    background: var(--ag-accent-color, #0d6efd);
    color: #fff;
    border-color: var(--ag-accent-color, #0d6efd);
}

.ins-set-filter__btn:hover {
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Column Chooser Popup
   -------------------------------------------------------------------------- */

.grid-column-chooser-popup {
    padding: 12px;
    width: min(360px, 92vw);
    min-width: 280px;
    max-width: 360px;
    max-height: min(72vh, 640px);
    overflow: hidden;
    background: var(--ag-background-color, #fff);
    color: var(--ag-foreground-color, #212529);
    border: 1px solid var(--ag-border-color, #d5dce7);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.grid-column-chooser-popup__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.28);
}

.grid-column-chooser-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
}

.grid-column-chooser-popup__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #68717d;
    padding: 0 4px;
}

.grid-column-chooser-popup__search {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--ag-border-color, #d5dce7);
    border-radius: 3px;
    font-size: 0.8125rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.grid-column-chooser-popup__list {
    max-height: min(52vh, 480px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grid-column-chooser-popup__empty {
    color: #68717d;
    font-size: 0.8rem;
    font-style: italic;
    padding: 6px 2px;
}

.grid-column-chooser-popup__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 0.8125rem;
}

.grid-column-chooser-popup__item:hover {
    background: var(--ag-row-hover-color, rgba(13, 110, 253, 0.06));
}

.grid-column-chooser-popup__hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #68717d;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

html[data-bs-theme='dark'] .ins-ag-grid {
    --ins-ag-grid-border-color: var(--color-border, #3b4453);
    --ins-ag-grid-surface: var(--color-surface, #1f2937);
    --ins-ag-grid-header-background: var(--color-surface-alt, var(--color-surface, #1f2937));
    --ag-foreground-color: var(--color-text, #e5e7eb);
    --ag-row-hover-color: rgba(96, 165, 250, 0.10);
    --ag-selected-row-background-color: rgba(96, 165, 250, 0.18);
}

html[data-bs-theme='dark'] .ins-set-filter {
    background: var(--ag-background-color, #1f2937);
    color: var(--ag-foreground-color, #e5e7eb);
}

html[data-bs-theme='dark'] .ins-set-filter__search-input {
    background: var(--ag-background-color, #1f2937);
    color: var(--ag-foreground-color, #e5e7eb);
}

html[data-bs-theme='dark'] .grid-column-chooser-popup {
    background: var(--ag-background-color, #1f2937);
    color: var(--ag-foreground-color, #e5e7eb);
}