/* Custom filter layout for Orders page */

/* Force filters container to full width */
.fi-ta-filters-ctn {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    padding: 1rem !important;
    background: #f9fafb !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
}

.dark .fi-ta-filters-ctn {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Above-content filters container - ensure grid column fills full width */
.fi-ta-filters-above-content-ctn {
    grid-template-columns: 1fr !important;
}

/* The main filters container - override the vertical grid */
.fi-ta-filters {
    display: block !important;
    width: 100% !important;
}

/* The header row with Filters and Reset */
.fi-ta-filters > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}

/* The filter form container (2nd child - between header and Apply button) */
.fi-ta-filters > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Each filter field wrapper */
.fi-fo-field-wrp {
    width: 100% !important;
}

/* Order search filter spans 2 columns */
.fi-ta-filters > div:nth-child(2) > div:has(.fi-section) {
    grid-column: span 2 !important;
}

/* Remove padding from search section */
.fi-ta-filters .fi-section-content {
    padding: 0.5rem !important;
}

/* Reduce spacing in search section grid */
.fi-ta-filters .fi-section-content .grid {
    gap: 0.5rem !important;
}

/* Remove bottom margin from placeholder text */
.fi-ta-filters .fi-section-content .fi-fo-placeholder {
    margin-bottom: 0.25rem !important;
}

/* Gap overrides for the filter form */
.fi-ta-filters.gap-y-4 > div:nth-child(2) {
    row-gap: 1rem !important;
    column-gap: 1rem !important;
}

/* Override any grid auto-flow */
.fi-ta-filters.grid {
    display: block !important;
}

/* Ensure all filter containers use full width */
body .fi-ta-filters,
body .fi-ta-filters-ctn,
body .fi-ta-filters > div {
    max-width: 100% !important;
}

/* Force with very high specificity */
html body .fi-body .fi-ta-ctn .fi-ta-filters-above-content-ctn .fi-ta-filters > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Force Assigned User, PartsSquare, Used Parts dropdowns onto their own row.
   These are the last 3 filter children in the grid (out of ~25 total).
   nth-last-child(3) = Assigned User → force to column 1 to start new row */
.fi-ta-filters > div:nth-child(2) > div:nth-last-child(3) {
    grid-column: 1 !important;
}

/* Style the Apply button */
.fi-ta-filters > div:last-child {
    margin-top: 0.5rem !important;
}