/* ===========================
   GLOBAL FIELDS STYLES
   Hover and focus styles for all field types across the application
   =========================== */

/* ===========================
   SELECT2 FIELDS
   =========================== */

/* Focus state for Select2 containers (exclude organization selector in topbar) */
/* Include specific IDs for notes and tickets pages to ensure proper targeting */
#select2-category_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-category_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-type_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-type_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-evaluation_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-evaluation_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-project_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-project_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-beneficiaire_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-beneficiaire_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-createur_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-createur_select2-container.select2-container--default.select2-container--open .select2-selection--single,
#select2-priority_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#select2-priority_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--multiple,
.select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--multiple,
.fi-page .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.fi-page .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.fi-main-content .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.fi-main-content .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
[data-filament-main] .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
[data-filament-main] .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* Focus state for Select2 dropdown search field (exclude organization selector) */
/* Include specific IDs for notes and tickets pages, and handle dropdowns created in body */
#select2-category_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-type_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-evaluation_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-project_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-beneficiaire_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-createur_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
#select2-priority_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
body > .select2-dropdown:not(:has(.select2-search--dropdown input[data-select2-id*="headerOrganizationSelector"])) .select2-search--dropdown .select2-search__field:focus,
.select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
.fi-page .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
.fi-main-content .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
[data-filament-main] .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* Z-index management for Select2 filter dropdowns */
/* Ensure Select2 filter dropdowns appear above the Filament topbar (z-index: 20) */
/* Dropdowns use z-index: 30 to be above navbar but below modals (z-index: 50+) */
/* Note: Organization selector in topbar has its own z-index rules in organization-selector.css */

/* Target filter dropdowns in page content areas */
.fi-page .select2-container,
.fi-main-content .select2-container,
[data-filament-main] .select2-container,
.fi-section .select2-container,
.fi-fo-field .select2-container {
    z-index: 15 !important;
}

.fi-page .select2-container--open,
.fi-main-content .select2-container--open,
[data-filament-main] .select2-container--open,
.fi-section .select2-container--open,
.fi-fo-field .select2-container--open {
    z-index: 30 !important;
}

.fi-page .select2-dropdown,
.fi-main-content .select2-dropdown,
[data-filament-main] .select2-dropdown,
.fi-section .select2-dropdown,
.fi-fo-field .select2-dropdown {
    z-index: 30 !important;
}

.fi-page .select2-container--open .select2-dropdown,
.fi-main-content .select2-container--open .select2-dropdown,
[data-filament-main] .select2-container--open .select2-dropdown,
.fi-section .select2-container--open .select2-dropdown,
.fi-fo-field .select2-container--open .select2-dropdown {
    z-index: 30 !important;
}

/* Ensure Select2 filter dropdowns appear above navbar but below modals */
.fi-page .select2-container.select2-container--open.select2-container--below,
.fi-main-content .select2-container.select2-container--open.select2-container--below,
[data-filament-main] .select2-container.select2-container--open.select2-container--below {
    z-index: 30 !important;
}

.fi-page .select2-container.select2-container--open.select2-container--above,
.fi-main-content .select2-container.select2-container--open.select2-container--above,
[data-filament-main] .select2-container.select2-container--open.select2-container--above {
    z-index: 30 !important;
}

/* Additional rules for Select2 dropdowns appended to body (Select2 default behavior) */
/* Select2 creates dropdowns as direct children of body, so we need to target them */
body > .select2-dropdown:not(.select2-container.organization-select2 ~ .select2-dropdown) {
    z-index: 30 !important;
}

/* Ensure dropdowns from page filters appear above navbar */
body > .select2-dropdown[aria-hidden="false"] {
    z-index: 30 !important;
}

/* ===========================
   TEXT INPUT FIELDS (search, text, email, etc.)
   =========================== */

/* Focus state for text inputs */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* ===========================
   DATE INPUT FIELDS
   =========================== */

/* Focus state for date inputs */
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* ===========================
   NUMBER INPUT FIELDS
   =========================== */
/* Focus state for number inputs */
input[type="number"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* ===========================
   TEXTAREA FIELDS
   =========================== */

/* Focus state for textarea */
textarea:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* Time tracker modal: focus for Client dropdown trigger (same as inputs/textarea above) */
#timeTrackerModal #timeTrackerClientSelect:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* ===========================
   NATIVE SELECT FIELDS (fallback)
   =========================== */

/* Hover state for native select */
select:not(.select2-hidden-accessible):hover {
    border-color: rgb(156, 163, 175) !important;
}

/* Focus state for native select */
select:not(.select2-hidden-accessible):focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

/* ===========================
   FILAMENT FILTER FIELDS
   =========================== */

/* Focus state for Filament filter inputs */
.fi-input[type="text"]:focus,
.fi-input[type="search"]:focus,
.fi-input[type="date"]:focus,
.fi-input[type="datetime-local"]:focus,
.fi-input[type="time"]:focus,
.fi-fo-field input[type="text"]:focus,
.fi-fo-field input[type="search"]:focus,
.fi-fo-field input[type="date"]:focus,
.fi-fo-field input[type="datetime-local"]:focus,
.fi-fo-field input[type="time"]:focus,
.fi-input-wrapper input[type="text"]:focus,
.fi-input-wrapper input[type="search"]:focus,
.fi-input-wrapper input[type="date"]:focus,
.fi-input-wrapper input[type="datetime-local"]:focus,
.fi-input-wrapper input[type="time"]:focus,
.fi-fo-field-wrp input[type="text"]:focus,
.fi-fo-field-wrp input[type="search"]:focus,
.fi-fo-field-wrp input[type="date"]:focus,
.fi-fo-field-wrp input[type="datetime-local"]:focus,
.fi-fo-field-wrp input[type="time"]:focus,
/* Additional selectors for Livewire filter components */
input[type="search"][wire\:model]:focus,
input[type="date"][wire\:model]:focus,
input[type="datetime-local"][wire\:model]:focus,
input[type="time"][wire\:model]:focus {
    border-color: #16A34A !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================
   FILAMENT MODAL FIELDS - single border on focus, no wrapper ring
   =========================== */
/* Inputs inside modals: only border color change, no extra ring */
.fi-modal-window .fi-input[type="text"]:focus,
.fi-modal-window .fi-input[type="search"]:focus,
.fi-modal-window .fi-input[type="date"]:focus,
.fi-modal-window .fi-input[type="datetime-local"]:focus,
.fi-modal-window .fi-input[type="time"]:focus,
.fi-modal-window .fi-fo-field input[type="text"]:focus,
.fi-modal-window .fi-fo-field input[type="search"]:focus,
.fi-modal-window .fi-fo-field input[type="date"]:focus,
.fi-modal-window .fi-fo-field input[type="datetime-local"]:focus,
.fi-modal-window .fi-fo-field input[type="time"]:focus,
.fi-modal-window .fi-input-wrapper input[type="text"]:focus,
.fi-modal-window .fi-input-wrapper input[type="search"]:focus,
.fi-modal-window .fi-input-wrapper input[type="date"]:focus,
.fi-modal-window .fi-input-wrapper input[type="datetime-local"]:focus,
.fi-modal-window .fi-input-wrapper input[type="time"]:focus,
.fi-modal-window .fi-fo-field-wrp input[type="text"]:focus,
.fi-modal-window .fi-fo-field-wrp input[type="search"]:focus,
.fi-modal-window .fi-fo-field-wrp input[type="date"]:focus,
.fi-modal-window .fi-fo-field-wrp input[type="datetime-local"]:focus,
.fi-modal-window .fi-fo-field-wrp input[type="time"]:focus,
.fi-modal-window .fi-fo-field-wrp select:focus,
.fi-modal-window .fi-fo-field select:focus,
.fi-modal-window .fi-input-wrapper select:focus,
.fi-modal-window select:focus,
.fi-modal-window select:not(.select2-hidden-accessible):focus,
.fi-modal-window input[type="select"]:focus,
.fi-modal-window textarea:focus,
.fi-modal-window input[type="number"]:focus {
    border-color: #16A34A !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Filament's focus ring from wrapper when input inside modal is focused */
.fi-modal-window .fi-input-wrapper:has(input:focus),
.fi-modal-window .fi-input-wrapper:has(textarea:focus),
.fi-modal-window .fi-fo-field-wrp:has(input:focus),
.fi-modal-window .fi-fo-field-wrp:has(textarea:focus),
.fi-modal-window .fi-fo-field:has(input:focus),
.fi-modal-window .fi-fo-field:has(textarea:focus) {
    box-shadow: none !important;
    outline: none !important;
}

/* Select2 in ticket/note inline-edit modals: single border on focus (all sides, bottom included) */
.fi-modal-window .select2-container--default.select2-container--focus .select2-selection--single,
.fi-modal-window .select2-container--default.select2-container--open .select2-selection--single,
.fi-modal-window .select2-container--default.select2-container--focus .select2-selection--multiple,
.fi-modal-window .select2-container--default.select2-container--open .select2-selection--multiple {
    border: 1px solid #16A34A !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove wrapper ring when Select2 in modal is focused/open */
.fi-modal-window .fi-fo-field-wrp:has(.select2-container--focus),
.fi-modal-window .fi-fo-field-wrp:has(.select2-container--open),
.fi-modal-window .fi-fo-field:has(.select2-container--focus),
.fi-modal-window .fi-fo-field:has(.select2-container--open) {
    box-shadow: none !important;
    outline: none !important;
}

/* ===========================
   DARK MODE SUPPORT
   =========================== */

.dark #select2-category_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-category_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-type_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-type_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-evaluation_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-evaluation_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-project_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-project_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-beneficiaire_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-beneficiaire_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-createur_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-createur_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark #select2-priority_select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.dark #select2-priority_select2-container.select2-container--default.select2-container--open .select2-selection--single,
.dark .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--multiple,
.dark .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--multiple,
.dark .fi-page .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark .fi-page .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark .fi-main-content .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark .fi-main-content .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark [data-filament-main] .select2-container--default.select2-container--focus:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single,
.dark [data-filament-main] .select2-container--default.select2-container--open:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-selection--single {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark #select2-category_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-type_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-evaluation_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-project_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-beneficiaire_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-createur_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark #select2-priority_select2-container ~ .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.dark body > .select2-dropdown:not(:has(.select2-search--dropdown input[data-select2-id*="headerOrganizationSelector"])) .select2-search--dropdown .select2-search__field:focus,
.dark .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
.dark .fi-page .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
.dark .fi-main-content .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus,
.dark [data-filament-main] .select2-container--default:not(.organization-select2):not(#select2-headerOrganizationSelector-container) .select2-search--dropdown .select2-search__field:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark input[type="text"]:focus,
.dark input[type="search"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="password"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="time"]:focus,
.dark input[type="month"]:focus,
.dark input[type="week"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark input[type="number"]:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark textarea:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark #timeTrackerModal #timeTrackerClientSelect:focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark select:not(.select2-hidden-accessible):focus {
    border-color: #16A34A !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #16A34A !important;
}

.dark .fi-input[type="text"]:focus,
.dark .fi-input[type="search"]:focus,
.dark .fi-input[type="date"]:focus,
.dark .fi-input[type="datetime-local"]:focus,
.dark .fi-input[type="time"]:focus,
.dark .fi-fo-field input[type="text"]:focus,
.dark .fi-fo-field input[type="search"]:focus,
.dark .fi-fo-field input[type="date"]:focus,
.dark .fi-fo-field input[type="datetime-local"]:focus,
.dark .fi-fo-field input[type="time"]:focus,
.dark .fi-input-wrapper input[type="text"]:focus,
.dark .fi-input-wrapper input[type="search"]:focus,
.dark .fi-input-wrapper input[type="date"]:focus,
.dark .fi-input-wrapper input[type="datetime-local"]:focus,
.dark .fi-input-wrapper input[type="time"]:focus,
.dark .fi-fo-field-wrp input[type="text"]:focus,
.dark .fi-fo-field-wrp input[type="search"]:focus,
.dark .fi-fo-field-wrp input[type="date"]:focus,
.dark .fi-fo-field-wrp input[type="datetime-local"]:focus,
.dark .fi-fo-field-wrp input[type="time"]:focus,
.dark input[type="search"][wire\:model]:focus,
.dark input[type="date"][wire\:model]:focus,
.dark input[type="datetime-local"][wire\:model]:focus,
.dark input[type="time"][wire\:model]:focus {
    border-color: #16A34A !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode: Filament modal fields - single border, no wrapper ring */
.dark .fi-modal-window .fi-input[type="text"]:focus,
.dark .fi-modal-window .fi-input[type="search"]:focus,
.dark .fi-modal-window .fi-input[type="date"]:focus,
.dark .fi-modal-window .fi-input[type="datetime-local"]:focus,
.dark .fi-modal-window .fi-input[type="time"]:focus,
.dark .fi-modal-window .fi-fo-field input:focus,
.dark .fi-modal-window .fi-input-wrapper input:focus,
.dark .fi-modal-window .fi-fo-field-wrp input:focus,
.dark .fi-modal-window textarea:focus,
.dark .fi-modal-window input[type="number"]:focus {
    border-color: #16A34A !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark .fi-modal-window .fi-input-wrapper:has(input:focus),
.dark .fi-modal-window .fi-input-wrapper:has(textarea:focus),
.dark .fi-modal-window .fi-fo-field-wrp:has(input:focus),
.dark .fi-modal-window .fi-fo-field-wrp:has(textarea:focus),
.dark .fi-modal-window .fi-fo-field:has(input:focus),
.dark .fi-modal-window .fi-fo-field:has(textarea:focus) {
    box-shadow: none !important;
    outline: none !important;
}

/* Dark mode: Select2 in ticket/note modals - single border on focus */
.dark .fi-modal-window .select2-container--default.select2-container--focus .select2-selection--single,
.dark .fi-modal-window .select2-container--default.select2-container--open .select2-selection--single,
.dark .fi-modal-window .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark .fi-modal-window .select2-container--default.select2-container--open .select2-selection--multiple {
    border: 1px solid #16A34A !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark .fi-modal-window .fi-fo-field-wrp:has(.select2-container--focus),
.dark .fi-modal-window .fi-fo-field-wrp:has(.select2-container--open),
.dark .fi-modal-window .fi-fo-field:has(.select2-container--focus),
.dark .fi-modal-window .fi-fo-field:has(.select2-container--open) {
    box-shadow: none !important;
    outline: none !important;
}

/* --- Global Select2 layout: arrow at far right, clear just to its left --- */
.select2-container .select2-selection--single {
    position: relative;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 2.5rem; /* avoid overlap with both icons */
}
.select2-container .select2-selection--single .select2-selection__arrow {
    right: 0.5rem; /* arrow at far right */
}
.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 2.5rem; /* clear just left of arrow */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.8;
}
.select2-container .select2-selection--single .select2-selection__clear:hover {
    opacity: 1;
}

/* Multiple select: keep clear on right; arrow unaffected */
.select2-container .select2-selection--multiple {
    position: relative;
    padding-right: 2rem; /* room for clear icon */
}
.select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.8;
}
.select2-container .select2-selection--multiple .select2-selection__clear:hover {
    opacity: 1;
}

/* Rendered text should ellipsize when space is tight */
.select2-container .select2-selection__rendered {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quill content styles */
.quill-content strong { font-weight: 600; }
.quill-content em { font-style: italic; }
.quill-content ul { list-style-type: disc; padding-left: 1.5rem; }
.quill-content ol { list-style-type: decimal; padding-left: 1.5rem; }
.quill-content h1 { font-size: 1.5rem; font-weight: 700; }
.quill-content h2 { font-size: 1.25rem; font-weight: 600; }
.quill-content .ql-align-center { text-align: center; }
.quill-content .ql-align-right  { text-align: right; }
.quill-content .ql-align-justify { text-align: justify; }
.quill-content a { color: #3b82f6; text-decoration: underline; }
.quill-content blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    color: #6b7280;
}