/* Prevent Alpine flash-of-unstyled-content */
[x-cloak] { display: none !important; }

/* ── TomSelect — match Tailwind input fields ────────────────────────────── */

/* Wrapper fills its parent */
.ts-wrapper { width: 100%; }

/* Control box — mirrors: border border-slate-200 rounded-lg px-3 py-2 text-sm */
.ts-control {
    border: 1px solid rgb(226 232 240) !important;
    border-radius: 0.5rem !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5rem !important;
    background: #fff !important;
    box-shadow: none !important;
    min-height: unset !important;
    cursor: pointer;
    color: rgb(51 65 85);
}

/* Focus ring — mirrors: focus:ring-2 focus:ring-indigo-400 */
.ts-wrapper.focus .ts-control,
.ts-wrapper:focus-within .ts-control {
    border-color: rgb(129 140 248) !important;
    box-shadow: 0 0 0 2px rgb(199 210 254) !important;
    outline: none !important;
}

/* Caret/chevron icon */
.ts-wrapper.single .ts-control::after { display: none; }

/* Dropdown container */
.ts-dropdown {
    border: 1px solid rgb(226 232 240) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.1) !important;
    background: #fff !important;
    margin-top: 3px !important;
    font-size: 0.875rem !important;
    overflow: hidden;
    z-index: 9999 !important;
}

/* Each option row */
.ts-dropdown .option {
    padding: 0.45rem 0.75rem !important;
    color: rgb(51 65 85) !important;
    cursor: pointer;
}

/* Highlighted option */
.ts-dropdown .option.active {
    background: rgb(238 242 255) !important;
    color: rgb(79 70 229) !important;
}

/* "No results" message */
.ts-dropdown .no-results {
    padding: 0.5rem 0.75rem;
    color: rgb(148 163 184);
    text-align: center;
    font-size: 0.875rem;
}

/* "Create new" row */
.ts-dropdown .create {
    padding: 0.45rem 0.75rem !important;
    color: rgb(99 102 241) !important;
    font-size: 0.875rem !important;
    cursor: pointer;
}
.ts-dropdown .create:hover { background: rgb(238 242 255) !important; }

/* RTL: flip the built-in caret */
[dir="rtl"] .ts-wrapper.single .ts-control { padding-inline-end: 0.75rem; }

/* ── TomSelect inside a compact inline badge field (status/type/priority/
   service/company chips) — strips TomSelect's own control chrome so it
   doesn't stack a second box on the field, and decouples the dropdown
   popup's width from the narrow badge field's width (TomSelect uses
   dropdownParent:'body', see crmTomSelect() in app.js, so the popup is
   free to size itself independently once detached). Without this the
   popup renders at the trigger's own width — a few rem wide — clipping
   option labels and looking broken/misplaced. ────────────────────────── */
.crm-ts-badge .ts-wrapper { display: inline-flex; min-height: 0; }
.crm-ts-badge .ts-wrapper .ts-control {
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    background: transparent;
    padding: 2px 4px;
    min-height: 1.75rem;
}
.crm-ts-badge .ts-wrapper .ts-control > input { min-width: 2rem; }
/* Compound selector (not a descendant combinator) — dropdownParent:'body' means
   ts.dropdown is never actually nested inside the .crm-ts-badge field once open;
   crmTomSelect() in app.js adds this class directly onto ts.dropdown itself instead. */
.ts-dropdown.crm-ts-badge { width: max-content !important; min-width: 12rem !important; max-width: 20rem; }

/* ── Mobile: sidebar always visible on desktop regardless of Alpine x-show ─ */
@media (min-width: 768px) {
    #crm-sidebar { display: flex !important; }
}