/* Final form-control overrides loaded after page/vendor styles.
   This file intentionally wins the cascade so all screens share one field look. */

:root {
    --ui-field-border: #d1d5db;
    --ui-field-bg: #ffffff;
    --ui-field-text: #111827;
    --ui-field-placeholder: #9ca3af;
    --ui-field-focus: #6366f1;
}

.filter-panel :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ot-input):not(.balance-input),
    select:not(.ts-hidden-accessible),
    textarea,
    .ts-wrapper .ts-control,
    .flatpickr-alt-input,
    button[class*="rounded-lg"][class*="border"][class*="border-gray-300"][class*="text-left"]
) {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--ui-field-border) !important;
    border-radius: 0.5rem !important;
    background: var(--ui-field-bg) !important;
    color: var(--ui-field-text) !important;
    min-height: 0 !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.filter-panel :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ot-input):not(.balance-input),
    textarea,
    .flatpickr-alt-input
)::placeholder {
    color: var(--ui-field-placeholder) !important;
    opacity: 1 !important;
}

.filter-panel :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ot-input):not(.balance-input),
    select:not(.ts-hidden-accessible),
    textarea,
    .ts-wrapper.focus .ts-control,
    .ts-wrapper.input-active .ts-control,
    .flatpickr-alt-input,
    button[class*="rounded-lg"][class*="border"][class*="border-gray-300"][class*="text-left"]:focus
):focus {
    outline: none !important;
    border-color: var(--ui-field-focus) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22) !important;
}

.filter-panel :where(select:not(.ts-hidden-accessible)) {
    padding-right: 2.75rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%) !important;
    background-position:
        calc(100% - 1.15rem) calc(50% - 2px),
        calc(100% - 0.85rem) calc(50% - 2px) !important;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem !important;
    background-repeat: no-repeat !important;
}

.filter-panel .ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem;
}

.filter-panel .ts-wrapper.single {
    position: relative;
}

.filter-panel .ts-wrapper.single::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #475569;
    border-bottom: 2px solid #475569;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.filter-panel .ts-wrapper.single .ts-control,
.filter-panel .ts-wrapper.multi .ts-control {
    padding: 0.4rem 0.8rem !important;
}

.filter-panel .ts-wrapper.single .ts-control {
    padding-right: 2.2rem !important;
}

.filter-panel .ts-wrapper.multi .ts-control > div {
    margin: 0 !important;
}

.filter-panel .ts-wrapper .item,
.filter-panel .ts-wrapper .ts-control input {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.filter-panel .ts-wrapper .ts-control input::placeholder {
    color: var(--ui-field-placeholder) !important;
    opacity: 1 !important;
}

.filter-panel :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ot-input):not(.balance-input):disabled,
    select:disabled,
    textarea:disabled,
    .ts-wrapper.disabled .ts-control
) {
    background: #f8fafc !important;
    color: #6b7280 !important;
    border-color: #d7dee8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.flatpickr-calendar--filter .flatpickr-current-month {
    font-size: 0.7rem !important;
}

.flatpickr-calendar--filter .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar--filter .flatpickr-current-month input.cur-year {
    font-size: 0.7rem !important;
    line-height: 1rem !important;
}

.flatpickr-calendar .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    height: 2rem !important;
    padding-top: 0.15rem !important;
    font-size: 0.95rem !important;
    line-height: 1.1rem !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.1rem !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    width: auto !important;
    padding-right: 0.75rem !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 3.8rem !important;
    height: 1.2rem !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowDown {
    padding: 0 0.15rem !important;
}