/* Shared search sizing. Colors and behavior remain owned by each control. */
:root {
    --hris-search-width: 300px;
    --hris-search-height: 40px;
    --hris-search-gap: 8px;
}

@media screen {
    .page:has(.employee-mobile-tabbar) input:is([type="search"], [placeholder^="Search" i], [aria-label^="Search" i], .smooth-select-search)::placeholder {
        font-size: 12px !important;
    }
}

@media screen {
    .page:not(.login-only-layout) input:is([type="search"], [placeholder^="Search" i], [aria-label^="Search" i], .smooth-select-search),
    #hris-internal-chat .chat-search input {
        box-sizing: border-box !important;
        width: var(--hris-search-width) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
    }

    /* Input and separate search action: 300px field + 8px gap + 40px button. */
    .page:not(.login-only-layout) .search-composer.animated-search:is(.is-open, .search-always-open) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--hris-search-height) !important;
        align-items: center !important;
        gap: var(--hris-search-gap) !important;
        position: relative !important;
        width: calc(var(--hris-search-width) + var(--hris-search-gap) + var(--hris-search-height)) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
        flex: 0 1 calc(var(--hris-search-width) + var(--hris-search-gap) + var(--hris-search-height)) !important;
        transition: none !important;
    }

    .page:not(.login-only-layout) .search-composer.animated-search:is(.is-open, .search-always-open) > input.form-control {
        grid-column: 1;
        grid-row: 1;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
        margin: 0 !important;
        padding: 0 12px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    .page:not(.login-only-layout) .search-composer.animated-search:is(.is-open, .search-always-open) > .search-toggle-button {
        grid-column: 2;
        grid-row: 1;
        position: static !important;
        width: var(--hris-search-height) !important;
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        transform: none !important;
    }

    .page:not(.login-only-layout) .search-composer.animated-search:is(.is-open, .search-always-open) > .search-suggestions {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: calc(var(--hris-search-height) + var(--hris-search-gap)) !important;
        width: auto !important;
    }

    .page:not(.login-only-layout) :is(.users-search-control, .leave-ledger-employee-filter) {
        box-sizing: border-box !important;
        width: var(--hris-search-width) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 1 var(--hris-search-width) !important;
    }

    .page:not(.login-only-layout) .users-search-control {
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
    }

    .page:not(.login-only-layout) .users-search-control > input {
        flex: 1 1 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .page:not(.login-only-layout) .signatory-toolbar > input {
        flex: 0 1 var(--hris-search-width) !important;
        margin-left: auto;
    }

    .page:not(.login-only-layout) .filter-toggle-button {
        width: var(--hris-search-height) !important;
        height: var(--hris-search-height) !important;
        min-height: var(--hris-search-height) !important;
    }

    /* Embedded pickers and chat use the available container, not a rigid width. */
    .page:not(.login-only-layout) :is(dialog, [role="dialog"], .smooth-select-menu, .coc-multiselect-menu, .signatory-employee-search, .leave-ledger-export-select-field) input:is([type="search"], [placeholder^="Search" i], [aria-label^="Search" i], .smooth-select-search),
    #hris-internal-chat .chat-search input {
        width: 100% !important;
    }

    .page:not(.login-only-layout) :is(dialog, [role="dialog"]) .leave-ledger-employee-filter {
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* Reserve space for clear buttons inside employee lookup fields. */
    .page:not(.login-only-layout) :is(.leave-ledger-employee-filter, .coc-multiselect-search-control, .signatory-employee-search, .leave-ledger-export-select-field) input {
        padding-right: 38px !important;
    }

    .page:not(.login-only-layout) .signatory-employee-search input {
        padding-right: 68px !important;
    }

    /* Menu searches and employee pickers share an inset icon. */
    .page:not(.login-only-layout) .search-composer.animated-search.organization-live-search {
        display: block !important;
        width: var(--hris-search-width) !important;
        flex-basis: var(--hris-search-width) !important;
    }

    .page:not(.login-only-layout) .search-composer.animated-search.organization-live-search > input.form-control,
    .page:not(.login-only-layout) .inset-search-field > input.form-control {
        padding-left: 40px !important;
    }

    .inset-search-field {
        position: relative;
    }

    .page:not(.login-only-layout) .inset-search-field:is(.leave-ledger-employee-filter, .leave-ledger-export-search-control) > input.form-control {
        padding-right: 72px !important;
    }

    .page:not(.login-only-layout) .inset-search-field > .leave-ledger-search-clear {
        top: 50%;
        width: 28px;
        height: 28px;
        min-height: 0;
        transform: translateY(-50%) !important;
    }

    .organization-live-search > .organization-search-icon,
    .inset-search-field > .organization-search-icon {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 13px;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        color: var(--records-muted, var(--hris-text-muted, #64748b));
        transform: translateY(-50%);
        pointer-events: none;
    }

    .organization-search-icon > svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .salary-annex-settings-page-panel .salary-annex-list-table-heading {
        flex-wrap: wrap;
        align-items: center;
    }

    .salary-annex-list-table-heading > .organization-live-search {
        margin-left: auto;
    }

    .page:not(.login-only-layout) .coc-monitor-shell .coc-filter-form {
        display: flex;
        align-items: center;
        gap: var(--hris-search-gap);
        width: auto;
        height: auto;
        flex: 0 1 auto;
    }

    .page:not(.login-only-layout) .coc-monitor-shell .coc-toolbar .organization-live-search {
        inset: auto !important;
        max-width: 100% !important;
        flex: 1 1 var(--hris-search-width) !important;
    }

    .page:not(.login-only-layout) .coc-monitor-shell .coc-filter-form > [data-coc-table-filter-toggle] {
        position: static;
        flex: 0 0 var(--hris-search-height);
    }
}

@media screen and (max-width: 640px) {
    .page:not(.login-only-layout) .employee-reference-panel .records-toolbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .page:not(.login-only-layout) .employee-reference-panel .reference-filter-form .search-composer {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .page:not(.login-only-layout) .employee-reference-panel .reference-filter-form .filter-actions {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .page:not(.login-only-layout) input:is([type="search"], [placeholder^="Search" i], [aria-label^="Search" i]),
    .page:not(.login-only-layout) .search-composer.animated-search:is(.is-open, .search-always-open),
    .page:not(.login-only-layout) :is(.users-search-control, .leave-ledger-employee-filter) {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .page:not(.login-only-layout) .search-composer.animated-search.organization-live-search {
        width: 100% !important;
    }

    .page:not(.login-only-layout) .coc-monitor-shell .coc-filter-form {
        width: 100%;
    }

    .page:not(.login-only-layout) .coc-monitor-shell .coc-toolbar .organization-live-search {
        flex-basis: 0 !important;
    }

    .page:not(.login-only-layout) .coc-monitor-shell[data-coc-active-view="balances"] .coc-toolbar .organization-live-search {
        flex-basis: 100% !important;
    }
}