/* ============================================================================
   Global Syncfusion form-control theme
   Loaded AFTER the Syncfusion CDN theme so these rules win on source order.
   Goal: make Syncfusion inputs / numeric / dropdowns / date(-range) pickers
   match the app's native Tailwind inputs & buttons:
     rounded-lg, border-gray-200, shadow-2xs, text-sm,
     blue focus accent (border-blue-500 + 1px ring),
     dark: neutral-* palette.

   `.velvet-membership-combobox` (green focus) and `.vv-datepicker`
   (borderless inline) keep their bespoke styling — excluded via :not().
   ============================================================================ */

/* ---- Wrapper box (text, numeric, dropdown, combobox, multiselect, date, daterange, datetime) ---- */
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker),
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) {
    border: 1px solid var(--color-gray-200, #e5e7eb) !important;
    border-radius: var(--radius-lg, 0.5rem) !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05) !important; /* shadow-2xs */
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Kill Syncfusion's bottom-border underline animation */
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker)::before,
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker)::after,
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker)::before,
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker)::after {
    display: none !important;
}

/* ---- Inner input ---- */
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input,
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;   /* text-sm */
    line-height: 1.25rem !important;
    color: #1f2937 !important;        /* gray-800 */
    background: transparent !important;
    font-family: var(--font-sans) !important;
}

.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input::placeholder,
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input::placeholder {
    color: #9ca3af !important;        /* gray-400 */
    opacity: 1 !important;
}

/* ---- Focus state: blue border + 1px ring ---- */
.e-input-group.e-control-wrapper.e-input-focus:not(.velvet-membership-combobox):not(.vv-datepicker),
.e-input-group.e-control-wrapper.e-is-focused:not(.velvet-membership-combobox):not(.vv-datepicker),
.e-float-input.e-control-wrapper.e-input-focus:not(.velvet-membership-combobox):not(.vv-datepicker),
.e-float-input.e-control-wrapper.e-is-focused:not(.velvet-membership-combobox):not(.vv-datepicker) {
    border-color: #3b82f6 !important;             /* blue-500 */
    box-shadow: 0 0 0 1px #3b82f6 !important;      /* focus:ring-blue-500 */
}

/* ---- Group icons (dropdown arrow, calendar, clear, spinner) ---- */
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon,
.e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon {
    color: #9ca3af !important;        /* gray-400 */
    background: transparent !important;
    border: none !important;
}

.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon:hover,
.e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon.e-active {
    color: #6b7280 !important;        /* gray-500 */
}

/* ---- Popups: rounded corners to match ---- */
.e-daterangepicker.e-popup,
.e-calendar.e-popup,
.e-datepicker.e-popup,
.e-datetimepicker.e-popup {
    border-radius: var(--radius-lg, 0.5rem) !important;
    border: 1px solid var(--color-gray-200, #e5e7eb) !important;
}

/* ============================================================================
   Dark mode
   ============================================================================ */
.dark .e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker),
.dark .e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) {
    border-color: var(--color-neutral-700, #404040) !important;
    background-color: transparent !important;
}

.dark .e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input,
.dark .e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input {
    color: #d4d4d4 !important;        /* neutral-300 */
}

.dark .e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input::placeholder,
.dark .e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input::placeholder {
    color: rgb(255 255 255 / 0.6) !important;   /* white/60 */
}

.dark .e-input-group.e-control-wrapper.e-input-focus:not(.velvet-membership-combobox):not(.vv-datepicker),
.dark .e-input-group.e-control-wrapper.e-is-focused:not(.velvet-membership-combobox):not(.vv-datepicker),
.dark .e-float-input.e-control-wrapper.e-input-focus:not(.velvet-membership-combobox):not(.vv-datepicker),
.dark .e-float-input.e-control-wrapper.e-is-focused:not(.velvet-membership-combobox):not(.vv-datepicker) {
    border-color: var(--color-neutral-600, #525252) !important;
    box-shadow: 0 0 0 1px var(--color-neutral-600, #525252) !important;
}

.dark .e-input-group.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon,
.dark .e-float-input.e-control-wrapper:not(.velvet-membership-combobox):not(.vv-datepicker) .e-input-group-icon {
    color: #737373 !important;        /* neutral-500 */
}

.dark .e-daterangepicker.e-popup,
.dark .e-calendar.e-popup,
.dark .e-datepicker.e-popup,
.dark .e-datetimepicker.e-popup {
    background: rgb(38 38 38) !important;          /* neutral-800 */
    border-color: var(--color-neutral-700, #404040) !important;
}

/* ============================================================================
   Consolidated from app.css
   The @apply-based rules below were converted to plain CSS, since this file is
   not processed by the Tailwind CLI. Visual result is unchanged.
   ============================================================================ */

/* ---- ListBox (was @apply rounded-xl p-1 / mb-1 rounded-lg bg-gray-200) ---- */
.e-listbox-container {
    border-radius: var(--radius-xl, 0.75rem);
    padding: 0.25rem;             /* p-1 */
}

.dark .e-listbox-container {
    border-radius: var(--radius-xl, 0.75rem);
    border-color: var(--color-neutral-700, #404040);
    padding: 0.25rem;
}

.e-listbox-container .e-list-item {
    margin-bottom: 0.25rem;       /* mb-1 */
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--color-gray-200, #e5e7eb);
}

.dark .e-listbox-container .e-list-item {
    margin-bottom: 0.25rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--color-neutral-200, #e5e5e5);
}

/* ---- Plain SfTextBox input (was @apply block w-full rounded-lg ...) ---- */
.e-control .e-textbox .e-lib .e-input {
    display: block;
    width: 100%;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    padding: 0.375rem 0.75rem;    /* py-1.5 px-3 */
}

.e-control .e-textbox .e-lib .e-input::placeholder {
    color: var(--color-gray-400, #9ca3af);
}

.e-control .e-textbox .e-lib .e-input:focus {
    border-color: var(--color-blue-500, #3b82f6);
    box-shadow: 0 0 0 1px var(--color-blue-500, #3b82f6);   /* ring-blue-500 */
}

.e-control .e-textbox .e-lib .e-input:disabled {
    pointer-events: none;
    opacity: 0.5;
}

@media (min-width: 40rem) {        /* sm: */
    .e-control .e-textbox .e-lib .e-input {
        padding-top: 0.5rem;       /* sm:py-2 */
        padding-bottom: 0.5rem;
        font-size: 0.875rem;       /* sm:text-sm */
        line-height: 1.25rem;
    }
}

.dark .e-control .e-textbox .e-lib .e-input {
    border-color: var(--color-neutral-700, #404040);
    background-color: transparent;
    color: var(--color-neutral-300, #d4d4d4);
}

.dark .e-control .e-textbox .e-lib .e-input::placeholder {
    color: rgb(255 255 255 / 0.6);     /* white/60 */
}

.dark .e-control .e-textbox .e-lib .e-input:focus {
    box-shadow: 0 0 0 1px var(--color-neutral-600, #525252);
}

/* ---- Inline borderless date picker (.vv-datepicker) ---- */
.vv-datepicker.e-input-group.e-control-wrapper,
.vv-datepicker.e-input-group.e-control-wrapper.e-input-focus,
.vv-datepicker.e-input-group.e-control-wrapper.e-is-focused {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.vv-datepicker.e-input-group.e-control-wrapper .e-input,
.vv-datepicker.e-input-group.e-control-wrapper.e-input-focus .e-input,
.vv-datepicker.e-input-group.e-control-wrapper.e-is-focused .e-input {
    flex: 1 1 0% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    min-height: unset !important;
    width: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: rgb(31 41 55) !important;
}

.dark .vv-datepicker.e-input-group.e-control-wrapper .e-input {
    color: rgb(212 212 212) !important;
}

.vv-datepicker.e-input-group.e-control-wrapper .e-input-group-icon,
.vv-datepicker.e-input-group.e-control-wrapper.e-input-focus .e-input-group-icon {
    padding-right: 0.75rem !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    border: none !important;
    height: auto !important;
    min-height: unset !important;
    line-height: normal !important;
    color: rgb(156 163 175) !important;
}

.dark .vv-datepicker.e-input-group.e-control-wrapper .e-input-group-icon {
    color: rgb(115 115 115) !important;
}

.vv-datepicker.e-input-group.e-control-wrapper::before,
.vv-datepicker.e-input-group.e-control-wrapper::after {
    display: none !important;
}