/**
 * Shared Filter Grid System
 * Provides standardized, responsive filter layouts for all list pages
 *
 * Usage:
 *   <div class="filter-grid filter-grid-auto">
 *     <label class="filter-label">Name:</label>
 *     <input class="filter-input" />
 *   </div>
 */

/* ========== Base Filter Grid ========== */
.filter-grid {
    display: grid;
    gap: 12px 15px;
    align-items: center;
    width: 100%;
}

/* ========== Layout Variants ========== */

/**
 * Auto Layout (Recommended for most pages)
 * Automatically determines optimal columns based on viewport
 */
.filter-grid-auto {
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
}

@media (min-width: 900px) and (max-width: 1199px) {
    .filter-grid-auto {
        grid-template-columns: auto 1fr auto 1fr auto 1fr !important;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .filter-grid-auto {
        grid-template-columns: auto 1fr auto 1fr !important;
    }
}

@media (max-width: 699px) {
    .filter-grid-auto {
        grid-template-columns: auto 1fr !important;
    }
}

/**
 * 2-Column Layout
 * For simpler filter sections with fewer fields
 */
.filter-grid-2col {
    grid-template-columns: auto 1fr auto 1fr;
}

@media (max-width: 699px) {
    .filter-grid-2col {
        grid-template-columns: auto 1fr !important;
    }
}

/**
 * 3-Column Layout
 * For medium complexity filter sections
 */
.filter-grid-3col {
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
}

@media (min-width: 700px) and (max-width: 899px) {
    .filter-grid-3col {
        grid-template-columns: auto 1fr auto 1fr !important;
    }
}

@media (max-width: 699px) {
    .filter-grid-3col {
        grid-template-columns: auto 1fr !important;
    }
}

/**
 * 4-Column Layout
 * For complex filter sections with many fields
 */
.filter-grid-4col {
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
}

@media (min-width: 900px) and (max-width: 1199px) {
    .filter-grid-4col {
        grid-template-columns: auto 1fr auto 1fr auto 1fr !important;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .filter-grid-4col {
        grid-template-columns: auto 1fr auto 1fr !important;
    }
}

@media (max-width: 699px) {
    .filter-grid-4col {
        grid-template-columns: auto 1fr !important;
    }
}

/* ========== Reset Button Positioning ========== */

/**
 * Reset button wrapper for desktop/tablet
 * Hidden on mobile - use .filter-actions-mobile instead
 */
.reset-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

@media (max-width: 699px) {
    .reset-button-wrapper {
        display: none;
    }
}

/**
 * Reset button wrapper for mobile
 * Hidden on desktop/tablet
 */
.filter-actions-mobile {
    display: none;
    margin-top: 1rem;
    justify-content: center;
}

@media (max-width: 699px) {
    .filter-actions-mobile {
        display: flex;
    }
}

/* ========== Filter Field Utilities ========== */

/**
 * Field spanning multiple columns
 * Usage: <input class="filter-input filter-span-2" />
 */
.filter-span-2 {
    grid-column: span 2;
}

.filter-span-3 {
    grid-column: span 3;
}

.filter-span-4 {
    grid-column: span 4;
}

@media (max-width: 699px) {
    .filter-span-2,
    .filter-span-3,
    .filter-span-4 {
        grid-column: span 1;
    }
}

/**
 * Hide specific filters (e.g., admin-only fields)
 * Usage: <div class="filter-hidden">...</div>
 */
.filter-hidden {
    display: none !important;
}

/**
 * Date picker wrapper consistency
 * Ensures date pickers align properly in grid
 */
.date-from-wrapper,
.date-to-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.calendar-spacer,
.date-from-spacer,
.date-to-spacer {
    display: none;
}

/* ========== Mobile Optimizations ========== */

@media (max-width: 699px) {
    .filter-grid {
        gap: 10px 15px;
    }

    .filter-label {
        padding-top: 0.25rem;
    }

    .filter-input,
    .filter-select {
        width: 100%;
    }
}

/* ========== Admin-Only Filter Pattern ========== */

/**
 * For filters that should be hidden for non-admin users
 * Add this class to the parent grid when admin filters are hidden
 *
 * Usage in Blazor:
 *   <div class="filter-grid filter-grid-auto @(IsAdminMode ? "" : "hide-admin-filters")">
 */
.hide-admin-filters .admin-only-label,
.hide-admin-filters .admin-only-input,
.hide-admin-filters .admin-only-field {
    display: none !important;
}

/* ========== Print Styles ========== */

@media print {
    .filter-grid,
    .reset-button-wrapper,
    .filter-actions-mobile {
        display: none !important;
    }
}