/*
 * kupu-components.css
 * Global PrimeFaces component style overrides.
 * Placed in META-INF/resources/css/ so it is available from the kupu-core JAR
 * and loaded by the base page template for all consuming applications.
 */

/* =========================================================
   p:autoComplete — normalize to match p:selectOneMenu style
   ========================================================= */

/*
 * The outer wrapper .ui-autocomplete is an inline-block span by default.
 * Override it to behave like .ui-selectonemenu: full block with a consistent
 * border, background, and corner radius that inherits the theme surface color.
 */
.ui-autocomplete {
    display: inline-flex !important;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--surface-border, #ced4da);
    border-radius: var(--border-radius, 6px);
    background: var(--surface-overlay, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    padding: 0 !important;
    overflow: visible;
}

/* Focus / hover ring — mirrors selectOneMenu focus outline */
.ui-autocomplete:has(.ui-inputfield:focus) {
    border-color: var(--primary-color, #2196f3);
    box-shadow: 0 0 0 0.2rem var(--primary-color-alpha, rgba(33,150,243,0.2));
    outline: none;
}

/*
 * The text input inside the autocomplete.
 * Remove its own border/shadow so only the outer wrapper border shows,
 * giving the same single-border appearance as selectOneMenu's label area.
 */
.ui-autocomplete input.ui-inputfield {
    flex: 1 1 auto;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--text-color, #495057);
    min-width: 0;
    box-sizing: border-box;
}

/*
 * The dropdown trigger button on the right.
 *
 * Measured computed styles of p:selectOneMenu trigger (.ui-selectonemenu-trigger):
 *   background:    rgba(0,0,0,0)  — transparent
 *   border:        0px none       — no border (wrapper owns it)
 *   border-radius: 0px 4px 4px 0px
 *   color:         rgb(73,80,87)
 *   width:         ~37px
 *   height:        34px
 *
 * We must strip all PrimeFaces .ui-state-default button chrome and
 * replicate this exactly.
 */
.ui-autocomplete .ui-autocomplete-dropdown,
.ui-autocomplete .ui-autocomplete-dropdown.ui-state-default,
.ui-autocomplete .ui-autocomplete-dropdown:enabled {
    flex: 0 0 auto;
    align-self: stretch;
    width: 38px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: none !important;
    color: rgb(73, 80, 87) !important;
    outline: none !important;
    cursor: pointer;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.ui-autocomplete .ui-autocomplete-dropdown:hover,
.ui-autocomplete .ui-autocomplete-dropdown.ui-state-hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ui-autocomplete .ui-autocomplete-dropdown .ui-button-icon {
    color: rgb(73, 80, 87) !important;
    font-size: 0.875rem;
}

.ui-autocomplete .ui-autocomplete-dropdown .ui-button-text {
    display: none !important;
    padding: 0 !important;
}

/*
 * The floating suggestion panel.
 * Match the selectOneMenu panel: white background, consistent border,
 * shadow, and rounded corners.
 */
.ui-autocomplete-panel {
    border: 1px solid var(--surface-border, #ced4da) !important;
    border-radius: var(--border-radius, 6px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    background: var(--surface-overlay, #ffffff) !important;
    overflow: hidden;
    padding: 0.25rem 0 !important;
}

/* Individual suggestion items */
.ui-autocomplete-panel .ui-autocomplete-item {
    padding: 0.5rem 0.75rem !important;
    color: var(--text-color, #495057) !important;
    cursor: pointer;
    transition: background 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-autocomplete-panel .ui-autocomplete-item:hover,
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight {
    background: var(--primary-color, #2196f3) !important;
    color: var(--primary-color-text, #ffffff) !important;
}

/*
 * When placed inside a .form-field with .block.w-full the wrapper should
 * expand to 100% of the available width.
 */
.form-field .ui-autocomplete.block {
    width: 100% !important;
}

/* Hide p:message container when there is no message to display */
.ui-message:not(.ui-message-error):not(.ui-message-warn):not(.ui-message-info):not(.ui-message-fatal) {
    display: none !important;
}