/* Wrapper */
.search-expandable-wrapper {
    padding: 10px;
    display: inline-block;
}

/* Form */
.search-expandable {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Input */
.search-expandable .form-control {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
    background: #fff;
    border: 1px solid #ced4da;
    font-size: 0.95rem;
    color: #212529;
    cursor: pointer;

    transition:
        width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Placeholder hidden when collapsed */
.search-expandable .form-control::placeholder {
    color: transparent;
    transition: color 0.3s ease;
}

/* Expand on hover */
.search-expandable:hover .form-control {
    width: 260px;
    padding-right: 45px;
}

/* Expand on focus */
.search-expandable .form-control:focus,
.search-expandable .form-control:not(:placeholder-shown) {
    width: 260px;
    padding-right: 45px;
    cursor: text;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    outline: none;
}

/* Show placeholder when expanded */
.search-expandable:hover .form-control::placeholder,
.search-expandable .form-control:focus::placeholder {
    color: #a0aec0;
}

/* Search button */
.search-expandable .btn-trigger {
    position: absolute;
    top: 0;
    right: 0;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;
    background: transparent;

    color: #495057;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;

    transition: color 0.3s ease;
}

/* Icon color when expanded */
.search-expandable:hover .btn-trigger,
.search-expandable .form-control:focus + .btn-trigger,
.search-expandable .form-control:not(:placeholder-shown) + .btn-trigger {
    color: #4f46e5;
}

th{
    background-color: #eeeeee;
}