/**
 * SPK SelectBox Styles
 * Tailwind overrides for Tom Select (requires base tom-select CSS)
 */

/* ================================================
   CONTROL - Main input area
   ================================================ */

.ts-wrapper .ts-control {
    @apply !bg-white !border !border-gray-300 !rounded-md !shadow-sm !py-2 !px-3 !text-sm;
    min-height: 38px !important;
}

.ts-wrapper.focus .ts-control {
    @apply !ring-2 !ring-blue-500 !border-blue-500;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ts-wrapper.disabled .ts-control {
    @apply !bg-gray-100 !cursor-not-allowed !opacity-60;
}

/* ================================================
   INPUT
   ================================================ */

.ts-wrapper .ts-control input {
    @apply !text-sm !text-gray-900;
}

.ts-wrapper .ts-control input::placeholder {
    @apply !text-gray-400;
}

/* ================================================
   DROPDOWN
   ================================================ */

.ts-wrapper .ts-dropdown {
    @apply !bg-white !border !border-gray-300 !rounded-md !shadow-lg !mt-1;
    z-index: 1000 !important;
}

.ts-wrapper .ts-dropdown-content {
    @apply !max-h-60;
}

/* ================================================
   OPTIONS
   ================================================ */

.ts-wrapper .ts-dropdown .option {
    @apply !px-3 !py-2 !text-sm !text-gray-700;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    @apply !bg-blue-50 !text-blue-700;
}

.ts-wrapper .ts-dropdown .option.selected {
    @apply !bg-blue-100 !text-blue-800;
}

/* ================================================
   OPTGROUP
   ================================================ */

.ts-wrapper .ts-dropdown .optgroup-header {
    @apply !px-3 !py-2 !text-xs !font-semibold !text-gray-500 !uppercase !tracking-wider !bg-gray-50;
}

/* ================================================
   NO RESULTS
   ================================================ */

.ts-wrapper .ts-dropdown .no-results {
    @apply !px-3 !py-2 !text-sm !text-gray-500;
}

/* ================================================
   MULTI SELECT - Tags/Items
   ================================================ */

.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control > div.item,
.ts-wrapper.multi .ts-control .item {
    background-color: #f3f4f6 !important; /* gray-100 */
    background-image: none !important;
    color: #374151 !important; /* gray-700 */
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.125rem !important;
    border: 1px solid #d1d5db !important; /* gray-300 */
    box-shadow: none !important;
}

.ts-wrapper.multi .ts-control > div.active,
.ts-wrapper.multi .ts-control .item.active {
    background-color: #e5e7eb !important; /* gray-200 */
    color: #1f2937 !important; /* gray-800 */
}

/* ================================================
   REMOVE BUTTON (plugin)
   ================================================ */

.ts-wrapper.plugin-remove_button .item .remove {
    border-left: 1px solid #d1d5db !important; /* gray-300 */
    color: #6b7280 !important; /* gray-500 */
    margin-left: 0.25rem !important;
    padding: 0 0.25rem !important;
    background: transparent !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    color: #374151 !important; /* gray-700 */
    background-color: #e5e7eb !important; /* gray-200 */
}

/* ================================================
   CLEAR BUTTON (plugin)
   ================================================ */

.ts-wrapper.plugin-clear_button .clear-button {
    @apply !text-gray-400;
}

.ts-wrapper.plugin-clear_button .clear-button:hover {
    @apply !text-gray-600;
}

/* ================================================
   SINGLE SELECT
   ================================================ */

.ts-wrapper.single .ts-control {
    @apply !bg-white;
    background-image: none !important;
}

.ts-wrapper.single .ts-control .item {
    @apply !text-gray-900 !bg-transparent;
    background-image: none !important;
}

/* Caret for single select */
.ts-wrapper.single .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #9ca3af;
    pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-top: none;
    border-bottom: 5px solid #9ca3af;
}

/* ================================================
   PLACEHOLDER
   ================================================ */

.ts-wrapper .ts-control .ts-placeholder {
    @apply !text-gray-400;
}

/* ================================================
   CREATE OPTION
   ================================================ */

.ts-wrapper .ts-dropdown .create {
    @apply !px-3 !py-2 !text-sm !text-blue-600;
}

.ts-wrapper .ts-dropdown .create:hover {
    @apply !bg-blue-50;
}

/* ================================================
   FORM VALIDATION STATES
   ================================================ */

.ts-wrapper.spk-form-invalid .ts-control {
    @apply !border-red-500;
}

.ts-wrapper.spk-form-invalid.focus .ts-control {
    @apply !ring-red-500 !border-red-500;
}

.ts-wrapper.spk-form-valid .ts-control {
    @apply !border-green-500;
}

/* ================================================
   HIDE ORIGINAL SELECT
   ================================================ */

select.tomselected {
    display: none !important;
}