/* ============================================================
   FINANCE ONLINE SEKOLAH
   SEARCH + FILTER ENGINE
   ============================================================ */


.finance-search-filter {

    display: flex;

    align-items: flex-end;

    gap:
        var(--finance-space-3);

    padding:
        var(--finance-space-4);

    background:
        var(--finance-bg-panel);

    border:
        1px solid var(--finance-border);

    border-radius:
        var(--finance-radius-md);

    box-shadow:
        var(--finance-shadow-sm);

    overflow-x:
        auto;
}


.finance-search-box {

    position: relative;

    min-width: 260px;

    flex:
        1 1 320px;
}


.finance-search-symbol {

    position: absolute;

    left: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--finance-text-muted);

    pointer-events: none;
}


.finance-search-control {

    padding-left:
        34px;

    padding-right:
        34px;
}


.finance-search-clear {

    position: absolute;

    right: 6px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius:
        var(--finance-radius-sm);

    background:
        transparent;

    color:
        var(--finance-text-muted);

    cursor:
        pointer;
}


.finance-search-clear:hover {

    background:
        var(--finance-bg-hover);

    color:
        var(--finance-text-primary);
}


.finance-filter-field {

    min-width: 135px;

    display: flex;

    flex-direction: column;

    gap:
        var(--finance-space-1);

    flex-shrink: 0;
}


.finance-filter-label {

    font-size:
        var(--finance-font-size-xs);

    font-weight:
        var(--finance-font-weight-semibold);

    color:
        var(--finance-text-secondary);
}


.finance-filter-actions {

    display: flex;

    align-items: center;

    gap:
        var(--finance-space-2);

    flex-shrink: 0;
}


.finance-filter-button {

    min-height:
        var(--finance-control-height);

    padding:
        0 var(--finance-space-4);

    border:
        1px solid var(--finance-border-dark);

    border-radius:
        var(--finance-radius-md);

    background:
        var(--finance-bg-soft);

    color:
        var(--finance-text-primary);

    cursor:
        pointer;
}


.finance-filter-button:hover {

    background:
        var(--finance-bg-hover);
}


.finance-filter-button-primary {

    border-color:
        var(--finance-primary);

    background:
        var(--finance-primary);

    color:
        var(--finance-text-inverse);
}


.finance-filter-button-primary:hover {

    background:
        var(--finance-primary-dark);
}


@media (max-width: 1000px) {

    .finance-search-filter {

        align-items:
            stretch;

        flex-wrap:
            wrap;
    }


    .finance-search-box {

        flex:
            1 1 100%;
    }


    .finance-filter-field {

        flex:
            1 1 150px;
    }

}