/* Compact filters styling - Match table header exactly */
.fi-ta-filters .fi-fo-field-wrp-label,
.fi-ta-filters label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgb(107 114 128) !important;
    margin-bottom: 0.375rem !important;
    line-height: 1.2 !important;
}

/* Make filter inputs properly sized */
.fi-ta-filters input,
.fi-ta-filters select,
.fi-ta-filters .fi-input,
.fi-ta-filters .fi-select-input {
    font-size: 13px !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.375rem !important;
}

/* Fix input wrapper alignment */
.fi-ta-filters .fi-input-wrp {
    display: flex !important;
    align-items: center !important;
}

/* Fix select button alignment */
.fi-ta-filters .fi-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    height: 2.5rem !important;
}

/* Compact field wrapper spacing - uniform height */
.fi-ta-filters .fi-fo-field-wrp {
    margin-bottom: 0.75rem !important;
    min-height: 4rem !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Filter section heading - match table style exactly */
.fi-ta-filters-heading,
.fi-ta-filters .fi-section-header-heading {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    margin-bottom: 0.5rem !important;
    color: rgb(107 114 128) !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Add collapse indicator to filters heading */
.fi-ta-filters-heading::before,
.fi-ta-filters .fi-section-header-heading::before {
    content: '▼' !important;
    margin-right: 0.5rem !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

/* Rotate arrow when collapsed */
.fi-ta-filters.collapsed .fi-ta-filters-heading::before,
.fi-ta-filters.collapsed .fi-section-header-heading::before {
    transform: rotate(-90deg) !important;
}

/* Compact the overall filter container with grid */
.fi-ta-filters {
    padding: 1rem !important;
    background: rgb(249 250 251);
    border-radius: 0.5rem;
    margin-bottom: 1rem !important;
    border: 1px solid rgb(229 231 235);
    overflow: visible !important;
}

/* Keep filters container properly positioned */
.fi-ta-filters-above-content-ctn {
    position: relative !important;
}

/* Style the filter toggle button */
.fi-ta-filters-above-content-ctn button[x-on\:click*="isCollapsed"] {
    position: relative !important;
    z-index: 100 !important;
    background: white !important;
    border: 1px solid rgb(229 231 235) !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
}

.dark .fi-ta-filters-above-content-ctn button[x-on\:click*="isCollapsed"] {
    background: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
}

/* Ensure the filters panel is visible when expanded */
.fi-ta-filters-above-content-ctn.fi-open .fi-ta-filters {
    display: block !important;
}

/* Fix Stock Actions dropdown to appear above filters */
.fi-ac-btn-group-dropdown {
    z-index: 100 !important;
}

/* Ensure action dropdowns appear on top */
[x-ref="panel"],
.fi-dropdown-panel {
    z-index: 100 !important;
}

/* Fix narrow select dropdown panels in filters - override Filament's max-w-[14rem] */
.fi-ta-filters .fi-select-input .fi-dropdown-panel,
.fi-ta-filters .fi-dropdown-panel {
    min-width: 300px !important;
    max-width: 500px !important;
    z-index: 9999 !important;
}

/* Allow overflow so wider dropdowns are visible beyond filter columns */
.fi-ta-filters .fi-select-input,
.fi-ta-filters .fi-select-input .fi-select-input-ctn,
.fi-ta-filters .fi-fo-field-wrp,
.fi-ta-filters .fi-fo-field,
.fi-ta-filters .fi-fo-component,
.fi-ta-filters > .fi-fo-component > .grid > div {
    overflow: visible !important;
}

/* Ensure the search input inside dropdown is full width */
.fi-ta-filters .fi-select-input .fi-dropdown-panel .fi-select-input-search-ctn {
    width: 100% !important;
}

.fi-ta-filters .fi-select-input .fi-dropdown-panel .fi-select-input-search-ctn input {
    width: 100% !important;
    height: auto !important;
    min-height: 2.25rem !important;
}

/* Ensure dropdown option labels are fully visible */
.fi-ta-filters .fi-select-input .fi-dropdown-panel .fi-select-input-option {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    padding: 0.5rem 0.75rem !important;
}

/* Fix header actions container */
.fi-ta-header-actions {
    position: relative !important;
    z-index: 60 !important;
}

/* Dark mode support */
.dark .fi-ta-filters {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

/* Hide scattered filter labels that appear separately */
.fi-ta-filters > .fi-fo-component > .grid > div > label:first-child:not(.fi-fo-field-wrp-label) {
    display: none !important;
}

/* Make filter fields more compact and inline */
.fi-ta-filters .fi-fo-field-wrp {
    display: inline-block !important;
    width: 100% !important;
}

/* Ensure filters are displayed inline properly */
.fi-ta-filters > .fi-fo-component > .grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: flex-end !important;
    overflow: visible !important;
}

/* Make individual filter containers consistent */
.fi-ta-filters > .fi-fo-component > .grid > div {
    flex: 1 1 220px !important;
    min-width: 200px !important;
    max-width: none !important;
}

.dark .fi-ta-filters .fi-fo-field-wrp-label,
.dark .fi-ta-filters label,
.dark .fi-ta-filters-heading {
    color: rgb(156 163 175) !important;
}

/* Make filter buttons properly sized */
.fi-ta-filters button[type="submit"] {
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
}

/* Uniform spacing between filter columns */
.fi-ta-filters .grid {
    gap: 1rem !important;
    align-items: start !important;
}

/* Ensure filter dropdowns don't overflow */
.fi-ta-filters .fi-input-wrp {
    width: 100% !important;
}

/* Make the reset button smaller */
.fi-ta-filters-reset-btn {
    font-size: 12px !important;
    padding: 0.25rem 0.5rem !important;
}

/* Fix text input alignment specifically */
.fi-ta-filters input[type="text"],
.fi-ta-filters input[type="number"] {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    vertical-align: middle !important;
}

/* Fix select dropdown text alignment */
.fi-ta-filters .choices__inner,
.fi-ta-filters .choices__list--single {
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Make date picker filter containers wider so From/To inputs aren't cramped */
.fi-ta-filters > .fi-fo-component > .grid > div:has(.fi-fo-date-time-picker) {
    flex: 2 1 440px !important;
    min-width: 400px !important;
}

/* Fix date picker alignment */
.fi-ta-filters .fi-fo-date-time-picker input {
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    height: 2.5rem !important;
}

/* Ensure all text is vertically centered */
.fi-ta-filters .fi-input-wrp > * {
    vertical-align: middle !important;
}

/* Fix placeholder text alignment */
.fi-ta-filters input::placeholder,
.fi-ta-filters .choices__placeholder {
    line-height: normal !important;
    opacity: 0.5;
}

/* Make filter groups look uniform with proper borders */
.fi-ta-filters .fi-fo-component {
    height: 100% !important;
    background: white !important;
    border: 1px solid rgb(229 231 235) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem !important;
}

/* Dark mode for filter components */
.dark .fi-ta-filters .fi-fo-component {
    background: rgb(24 24 27) !important;
    border-color: rgb(63 63 70) !important;
}

/* Ensure consistent filter field heights */
.fi-ta-filters .fi-fo-field {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Style filter group labels to stand out */
.fi-ta-filters .fi-fo-component > label:first-child {
    display: block !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid rgb(229 231 235) !important;
}

.dark .fi-ta-filters .fi-fo-component > label:first-child {
    border-bottom-color: rgb(63 63 70) !important;
}

/* Uniform button styling */
.fi-ta-filters .fi-btn {
    font-size: 13px !important;
    height: 2.5rem !important;
    padding: 0 1rem !important;
}

/* Make filter indicators more subtle */
.fi-ta-filter-indicators {
    font-size: 11px !important;
    margin-top: 0.25rem !important;
}

/* Style the reset filters button */
button.fi-link.fi-color-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: white !important;
    background-color: rgb(239 68 68) !important;
    border-radius: 0.375rem !important;
    border: none !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
    cursor: pointer !important;
}

button.fi-link.fi-color-danger:hover {
    background-color: rgb(220 38 38) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Style the toggle button for filters */
.fi-ta-filters-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background-color: rgb(249 250 251) !important;
    border: 1px solid rgb(229 231 235) !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.fi-ta-filters-toggle:hover {
    background-color: rgb(243 244 246) !important;
    border-color: rgb(209 213 219) !important;
}

.dark .fi-ta-filters-toggle {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
}

.dark .fi-ta-filters-toggle:hover {
    background-color: rgb(39 52 68) !important;
    border-color: rgb(75 85 99) !important;
}

/* Make Dashboard Search Input Full Width and Beautiful */
/* Make the widget card full width */
.fi-wi-card:has(input[placeholder*="Search products"]) {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dark .fi-wi-card:has(input[placeholder*="Search products"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure parent container is full width */
.relative.w-full:has(input[placeholder*="Search products"]) {
    width: 100% !important;
    max-width: 100% !important;
}

/* Style the search input beautifully */
input[placeholder*="Search products"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 3rem !important;
    font-size: 1.125rem !important;
    border: 2px solid rgb(209 213 219) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
    transition: all 0.2s ease !important;
}

input[placeholder*="Search products"]:hover {
    border-color: rgb(147 197 253) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

input[placeholder*="Search products"]:focus {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
    outline: none !important;
}

.dark input[placeholder*="Search products"] {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: white !important;
}

.dark input[placeholder*="Search products"]:hover {
    border-color: rgb(59 130 246) !important;
}

.dark input[placeholder*="Search products"]:focus {
    border-color: rgb(96 165 250) !important;
}

/* Ensure parent container has proper positioning */
.fi-wi-card:has(input[placeholder*="Search products"]) .relative {
    position: relative !important;
}

/* Position the search icon inside the input */
.fi-wi-card:has(input[placeholder*="Search products"]) .relative > svg {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    pointer-events: none !important;
    z-index: 10 !important;
    color: rgb(156 163 175) !important;
}

/* Position the clear button inside the input */
.fi-wi-card:has(input[placeholder*="Search products"]) .relative > button {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.fi-wi-card:has(input[placeholder*="Search products"]) .relative > button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.fi-wi-card:has(input[placeholder*="Search products"]) .relative > button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* === Fix custom JS autocomplete dropdown text display in filters === */

/* Pre-render "All" placeholder + chevron while Alpine.js select component is loading.
   The :empty pseudo-class matches only before Alpine adds children, then auto-hides. */
.fi-ta-filters .fi-select-input > div[x-ref="select"]:empty {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 2rem 0 0.75rem !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--gray-950, #030712) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
}

.fi-ta-filters .fi-select-input > div[x-ref="select"]:empty::before {
    content: 'All' !important;
}

:is(.dark, .dark *) .fi-ta-filters .fi-select-input > div[x-ref="select"]:empty {
    color: white !important;
}

/* Reset padding on the JS select wrapper div (not native <select>) so the inner button handles spacing.
   Use align-items:stretch so inner container fills the full height for proper vertical centering. */
.fi-ta-filters div.fi-select-input {
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

/* Make the inner container fill the wrapper */
.fi-ta-filters .fi-select-input-ctn {
    width: 100% !important;
    height: 100% !important;
}

/* Make the select button fill its parent and vertically center content */
.fi-ta-filters .fi-select-input-btn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    padding: 0 2rem 0 0.75rem !important;
    overflow: hidden !important;
}

/* Prevent text wrapping in value container - override Filament's text-wrap:wrap */
.fi-ta-filters .fi-select-input-value-ctn {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    text-wrap: nowrap !important;
    word-break: normal !important;
    overflow: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Truncate selected value label to single line with ellipsis */
.fi-ta-filters .fi-select-input-value-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

/* Keep the clear/remove button visible and properly spaced */
.fi-ta-filters .fi-select-input-value-remove-btn {
    flex-shrink: 0 !important;
    margin-inline-start: 0.5rem !important;
}

/* Ensure placeholder text in custom JS selects matches selected-value appearance */
.fi-ta-filters .fi-select-input-value-ctn > span:not(.fi-select-input-value-label):not(.fi-select-input-value-remove-btn) {
    line-height: normal !important;
    color: inherit !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}