/* =====================================================
   Syncfusion overrides
   Purpose:
   - Match Bootstrap typography + sizing
   - Normalize dropdown / placeholder inconsistencies
   - Apply consistent “input background” styling for Syncfusion controls
   Notes:
   - Uses variables defined in app.css (:root), e.g. --sf-input-bg, --input-height, etc.
   - Scoped to .customer-form so we can avoid !important as much as possible
   =====================================================
   Last reviewed: 2026-01-07
*/

/* -----------------------------------------------------
   1) Typography normalization (Bootstrap-like)
   ----------------------------------------------------- */

/* Syncfusion wrappers and inputs */
.customer-form .e-control-wrapper,
.customer-form .e-input-group,
.customer-form .e-control-wrapper .e-input,
.customer-form .e-input-group .e-input,
.customer-form .e-control-wrapper input.e-input,
.customer-form .e-input-group input.e-input,
.customer-form input.e-input.e-control,
.customer-form textarea.e-input.e-control {
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
}

    /* Placeholder sizing/opacity */
    .customer-form .e-control-wrapper input.e-input::placeholder,
    .customer-form .e-input-group input.e-input::placeholder {
        font-size: 1rem;
        font-family: inherit;
        opacity: 0.6;
    }

/* Dropdown popup list items */
.customer-form .e-popup.e-popup-open .e-list-item,
.customer-form .e-popup.e-popup-open .e-list-item *,
.customer-form .e-popup.e-popup-open .e-list-group-item,
.customer-form .e-popup.e-popup-open .e-list-group-item * {
    font-size: 1rem;
    font-family: inherit;
}

/* -----------------------------------------------------
   2) Base Syncfusion “input theme”
   Apply background + border to the WRAPPER.
   Keep the inner input transparent.
   ----------------------------------------------------- */

/* Most Syncfusion inputs (ComboBox, DropDownList, TextBox, DatePicker, etc.) */
.customer-form .e-control-wrapper.e-input-group,
.customer-form .e-input-group.e-control-wrapper,
.customer-form .e-control-wrapper.e-input-group.e-control-container,
.customer-form .e-input-group.e-control-container {
    min-height: var(--input-height);
    background-color: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-radius);
    box-sizing: border-box;
}

    /* Inner input padding/line-height to match Bootstrap */
    .customer-form .e-control-wrapper.e-input-group input.e-input,
    .customer-form .e-input-group input.e-input,
    .customer-form .e-control-wrapper.e-input-group textarea.e-input,
    .customer-form .e-input-group textarea.e-input {
        padding: var(--input-padding-y) var(--input-padding-x);
        line-height: 1.5;
        background-color: transparent;
        color: var(--sf-input-text);
        height: auto;
        box-sizing: border-box;
    }

        /* Placeholder color */
        .customer-form .e-control-wrapper.e-input-group input.e-input::placeholder,
        .customer-form .e-input-group input.e-input::placeholder,
        .customer-form .e-control-wrapper.e-input-group .e-float-text,
        .customer-form .e-input-group .e-float-text {
            color: var(--sf-input-placeholder-color);
        }

    /* Icon/button area: keep transparent so wrapper color shows */
    .customer-form .e-control-wrapper.e-input-group .e-input-group-icon,
    .customer-form .e-input-group .e-input-group-icon,
    .customer-form .e-control-wrapper.e-input-group .e-input-group-icon.e-icons,
    .customer-form .e-input-group .e-input-group-icon.e-icons,
    .customer-form .e-control-wrapper.e-input-group .e-clear-icon,
    .customer-form .e-input-group .e-clear-icon,
    .customer-form .e-control-wrapper.e-input-group .e-clear-icon.e-icons,
    .customer-form .e-input-group .e-clear-icon.e-icons {
        background-color: transparent;
    }

/* -----------------------------------------------------
   3) ComboBox / DropDownList height alignment
   ----------------------------------------------------- */

/* Prevent Syncfusion wrapper from adding extra vertical padding */
.customer-form .e-control-wrapper.e-combobox.e-input-group,
.customer-form .e-control-wrapper.e-ddl.e-input-group {
    padding: 0;
    min-height: var(--input-height);
    background-color: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-radius);
    box-sizing: border-box;
}

/* Ensure combo input matches Bootstrap padding */
.customer-form .e-control-wrapper.e-combobox input.e-input,
.customer-form .e-control-wrapper.e-ddl input.e-input {
    padding: var(--input-padding-y) var(--input-padding-x);
    line-height: 1.5;
    background-color: transparent;
    color: var(--sf-input-text);
}

/* Dropdown icon vertical alignment */
.customer-form .e-control-wrapper.e-combobox .e-input-group-icon,
.customer-form .e-control-wrapper.e-ddl .e-input-group-icon {
    min-height: var(--input-height);
    display: flex;
    align-items: center;
}

/* -----------------------------------------------------
   4) Focus state (Bootstrap-like)
   ----------------------------------------------------- */

.customer-form .e-input-group:focus-within {
    border-color: var(--sf-focus-border);
    box-shadow: 0 0 0 0.1rem var(--sf-focus-ring);
    background-color: #ffffff;
}

/* -----------------------------------------------------
   5) MaskedTextBox (Phone)
   In your build it renders a plain input:
   <input class="e-control e-maskedtextbox e-lib e-input" ...>
   So style the INPUT directly.
   ----------------------------------------------------- */

.customer-form input.e-control.e-input.e-maskedtextbox {
    height: var(--input-height);
    min-height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    background-color: var(--sf-input-bg);
    color: var(--sf-input-text);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-radius);
    box-sizing: border-box;
    line-height: 1.5;
}

    .customer-form input.e-control.e-input.e-maskedtextbox::placeholder {
        color: var(--sf-input-placeholder-color);
    }

/* -----------------------------------------------------
   6) Optional: If you tag Syncfusion controls with CssClass="sf-input"
   you can keep these helpers. They’re scoped and non-invasive.
   ----------------------------------------------------- */

.customer-form .sf-input {
    background-color: var(--sf-input-bg);
}

/* If sf-input lands on an outer wrapper and inner group paints background */
.customer-form .sf-input .e-input-group,
.customer-form .sf-input.e-input-group,
.customer-form .sf-input.e-control-wrapper,
.customer-form .sf-input.e-control-wrapper.e-input-group,
.customer-form .sf-input.e-control-wrapper.e-input-group.e-control-container {
    background-color: var(--sf-input-bg);
    border: 1px solid var(--sf-input-border);
    border-radius: var(--sf-radius);
    box-sizing: border-box;
}

    .customer-form .sf-input input,
    .customer-form .sf-input input.e-input,
    .customer-form .sf-input .e-input-group input,
    .customer-form .sf-input .e-input-group input.e-input {
        background-color: transparent;
        color: var(--sf-input-text);
    }

    .form-actions {
        display: flex;
        flex-wrap: wrap; /* if the window is narrow */
        gap: 0.5rem; /* spacing between buttons */
        align-items: center;
    }

    pagedcombobox,
    .paged-combobox-container {
        width: 100%;
        display: block;
    }

.entity-search-row {
    width: min(100%,575px);
}