select.form-control {
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="black" d="M2 1l3 3 3-3z"/></svg>'); /* Proportional "V" shape */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Adjusted position */
    padding-right: 25px; /* Add padding to make space for the arrow */
    height: calc(1.5em + .75rem + 2px); /* Adjust height for better alignment */
    line-height: 1.5; /* Ensure text is vertically centered */
}

.form-inline .form-control {
    margin-right: 10px; /* Add some spacing between the input and buttons */
}

.btn-confirm, .btn-cancel {
    padding: 10px 15px; /* Add padding for a better look */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin: 10px 5px; /* Add margin for spacing */
    font-size: 16px; /* Increase font size */
}

.btn-confirm {
    background-color: #28a745; /* Green background for confirm */
    color: white; /* White text */
}

.btn-confirm:hover {
    background-color: #218838; /* Darker green on hover */
}

.btn-cancel {
    background-color: #dc3545; /* Red background for cancel */
    color: white; /* White text */
}

.btn-cancel:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Tailwind compatibility for Select2 single selects */
.select2-container .select2-selection--single {
    height: 2.25rem !important; /* h-9 */
    border-color: #d1d5db; /* gray-300 */
    border-radius: 0.375rem; /* rounded-md */
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.25rem !important; /* center text */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 2rem; /* space for arrow */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* gray-700 */
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.25rem !important; /* match selection height */
    right: 0.5rem;
}
.select2-dropdown {
    border-color: #d1d5db; /* gray-300 */
}
.select2-results__option {
    font-size: 0.875rem; /* text-sm */
}

/* --- Modal Masonry (compact fields, no vertical gaps) --- */
.modal-masonry {
    column-gap: 0.75rem; /* ~gap-3 */
}
.modal-masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    margin-bottom: 0.75rem; /* ~gap-3 */
}
/* columns responsive: 1 col by default, 2 on sm+, 3 on lg+ if space allows */
@media (min-width: 640px) { /* sm */
  .modal-masonry { column-count: 2; }
}
@media (min-width: 1024px) { /* lg */
  .modal-masonry { column-count: 3; }
}