/* ---------------------------------------------------------------------------
   wwwroot/css/shared/global/06-filters.css

   Loaded by _Layout.cshtml as part 6 of 17 for every page.
   Cascade order is the file order in that <link> list:
     previous: 05-quick-view.css
     next:     07-banner.css

   Split out of a single monolithic stylesheet. Do not reorder the <link>
   tags and do not move a rule between these files: both change the cascade.
--------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
}


.my-quartz-grid {
    
    --ag-font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --ag-font-size: 0.8125rem;
    --ag-border-color: #e0e0e0;
    --ag-row-border-color: #ececec;
    --ag-background-color: #ffffff;
    --ag-odd-row-background-color: #ffffff; 
    --ag-row-hover-color: rgba(0, 0, 0, 0.03);
    --ag-header-background-color: #ffffff;
    --ag-header-foreground-color: #161616; 
    --ag-header-cell-hover-background-color: rgba(0, 0, 0, 0.03);
    --ag-selected-row-background-color: rgba(15, 98, 254, 0.08);
    --ag-range-selection-border-color: #0f62fe;
    --ag-border-radius: 10px;
    
    --ag-header-height: 56px;
    --ag-group-header-height: 44px;
    --ag-floating-filter-height: 52px;
    --ag-row-height: 48px;
    
    --ag-control-panel-background-color: #ffffff;
    --ag-input-border-color: #e0e0e0;
    --ag-input-border-radius: 8px;
}

    
    .my-quartz-grid .ag-root-wrapper {
        border: 1px solid var(--ag-border-color);
        border-radius: var(--ag-border-radius);
        overflow: hidden;
    }

    
    .my-quartz-grid .ag-header-group-cell-label {
        justify-content: center;
        font-weight: 600;
    }

    
    .my-quartz-grid .ag-header-cell-label {
        font-weight: 600;
    }

    
    .my-quartz-grid .ag-floating-filter-input,
    .my-quartz-grid .ag-floating-filter-full-body {
        align-items: center;
    }

    
    .my-quartz-grid .ag-cell-focus,
    .my-quartz-grid .ag-cell:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    
    .my-quartz-grid .ag-cell {
        padding-top: 6px;
        padding-bottom: 6px;
    }


.ag-theme-quartz {
    --ag-header-background-color: #ffffff;
    --ag-background-color: #ffffff;
    --ag-data-background-color: #ffffff;
}

.container-fluid {
    padding-left: 100px;
    padding-right: 100px;
}
    
    .cds--btn--primary.btn-obsidian-outline:hover {
        background: #f7f7f7;
        border-color: #4f5661;
        color: #1f2933;
    }

    
    .cds--btn--primary.btn-obsidian-outline:active {
        background: #ececec;
        border-color: #3f4650;
    }

    
    .cds--btn--primary.btn-obsidian-outline:focus,
    .cds--btn--primary.btn-obsidian-outline:focus-visible {
        outline: 2px solid #0f62fe;
        outline-offset: 2px;
    }

    
    .cds--btn--primary.btn-obsidian-outline:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.load-data-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.8fr) 160px 160px 132px;
    gap: 1rem;
    align-items: end;
    display: grid;
    grid-template-columns: minmax(320px, 1.8fr) 160px 160px 132px;
    gap: 1rem;
    align-items: end;
}

    
    

    
    .load-data-row .cds-form-item .cds--date-picker-input,
    .load-data-row .cds-form-item input {
        min-height: 48px;
        border-radius: 8px;
    }

    
    .load-data-row .cds--btn--primary.btn-obsidian-outline {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 1.25rem;
        border-radius: 8px;
        background: #fff;
        color: #161616;
        border: 1px solid #262626;
        text-align: center;
        font-weight: 500;

    }


#originatorNameFilter.cds--select-input,
#asOfDateFrom.cds--text-input,
#asOfDateTo.cds--text-input,
button.cds--btn.btn-obsidian-clean {
    box-sizing: border-box;
}


#originatorNameFilter.cds--select-input,
#asOfDateFrom.cds--text-input,
#asOfDateTo.cds--text-input {
    height: var(--ctrl-h) !important;
    min-height: var(--ctrl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background: var(--ctrl-bg) !important;
    color: var(--ctrl-text) !important;
    border: var(--ctrl-border-w) solid var(--ctrl-border) !important;
    border-radius: 0 !important;
    line-height: calc(var(--ctrl-h) - (var(--ctrl-border-w) * 2)) !important;
    box-shadow: none !important;
}


#originatorNameFilter.cds--select-input {
    padding-right: 2.5rem !important;

}


button.cds--btn.btn-obsidian-clean {
    height: var(--ctrl-h) !important;
    min-height: var(--ctrl-h) !important;
    padding: 0 1.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: var(--ctrl-text) !important;
    border: var(--ctrl-border-w) solid var(--ctrl-border) !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}


.filters-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: end;
}


.filter-item:first-child {
    width: 520px;
    min-width: 520px;
    max-width: 520px;
    flex: 0 0 520px;
}


.filter-item:nth-child(2),
.filter-item:nth-child(3) {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    flex: 0 0 180px;
}


.filter-item:nth-child(4) {
    flex: 0 0 auto;
}
    

    .filters-section .filter-item {
        margin-right: auto; 
    }

.filters-section {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}


.grid-container {
    width: 100%;
}


#originatorNameFilter.cds--text-input,
#asOfDateFrom.cds--text-input,
#asOfDateTo.cds--text-input {
    box-sizing: border-box;
    height: var(--ctrl-h) !important;
    min-height: var(--ctrl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important; 
    background: var(--ctrl-bg) !important;
    color: var(--ctrl-text) !important;
    border: var(--ctrl-border-w) solid var(--ctrl-border) !important;
    border-radius: 0 !important;
    line-height: calc(var(--ctrl-h) - (var(--ctrl-border-w) * 2)) !important;
    box-shadow: none !important;
}


#originatorNameFilter-menu {
    position: absolute;
    z-index: 9999;
    width: 100%;
    background: var(--ctrl-bg) !important;
    border: var(--ctrl-border-w) solid var(--ctrl-border) !important;
    border-top: none !important;
    max-height: 240px;
    overflow-y: auto;
    min-width: 920px;
}


#originatorComboBox {
    position: relative;
    min-width: 520px;
}


#originatorNameFilter-menu .cds--list-box__menu-item {
    color: var(--ctrl-text) !important;
    background: transparent !important;
}

    #originatorNameFilter-menu .cds--list-box__menu-item:hover,
    #originatorNameFilter-menu .cds--list-box__menu-item--highlighted {
        background: var(--ctrl-border) !important;
    }

#originatorNameFilter-menu .cds--list-box__menu-item--active {
    background: var(--ctrl-border) !important;
    font-weight: 600;
}


.filter-item:first-child {
    width: 520px;
    min-width: 520px;
    max-width: 520px;
    flex: 0 0 520px;
}