/* =========================================================
   DjimanBo - Compact list filter header
   File: Skanweb/wwwroot/css/skan-item-filters.css
   Load LAST after skan-provider-items.css and skan-requests.css
   ========================================================= */

.item-list-panel,
.rq-list-panel,
.wrq-panel,
.rq-list-panel.item-list-panel,
.wrq-panel.item-list-panel {
    overflow: visible !important;
}

.item-filter-simple,
.rq-filter-compact {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.item-filter-simple-field {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

    .item-filter-simple-field.status {
        width: 170px !important;
        flex: 0 0 170px !important;
    }

    .item-filter-simple-field.kind {
        width: 150px !important;
        flex: 0 0 150px !important;
    }

    .item-filter-simple-field.city {
        width: 180px !important;
        flex: 0 0 180px !important;
    }

    .item-filter-simple-field.search {
        width: min(360px, 34vw) !important;
        flex: 0 1 360px !important;
        margin-left: auto !important;
    }

.item-filter-simple label,
.item-filter-simple-label,
.item-filter-label,
.ifd-label {
    display: none !important;
}

/* =========================================================
   Dropdown like language menu, but smaller
   ========================================================= */

.ifd-mini {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 80 !important;
}

.ifd-mini-trigger {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border: 1px solid #d5e2ed !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #102033 !important;
    box-shadow: 0 8px 18px rgba(0, 61, 89, .045) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

    .ifd-mini-trigger:hover,
    .ifd-mini-trigger:focus-visible {
        border-color: #b7ccdd !important;
        box-shadow: 0 12px 26px rgba(0, 61, 89, .075) !important;
        outline: none !important;
    }

    .ifd-mini-trigger > i:first-child {
        width: 15px !important;
        min-width: 15px !important;
        color: #00405f !important;
        font-size: .78rem !important;
        text-align: center !important;
    }

    .ifd-mini-trigger > span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #172033 !important;
        font-size: .78rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

.ifd-mini-caret {
    flex: 0 0 auto !important;
    color: #64748b !important;
    font-size: .68rem !important;
    transition: transform .16s ease !important;
}

    .ifd-mini-caret.open {
        transform: rotate(180deg) !important;
    }

.ifd-mini-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3990 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: default !important;
}

.ifd-mini-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    z-index: 4000 !important;
    min-width: 230px !important;
    width: max-content !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    display: grid !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid #dce8f1 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 54px rgba(16, 40, 70, .16) !important;
}

    .ifd-mini-menu::before {
        content: "" !important;
        position: absolute !important;
        top: -7px !important;
        left: 28px !important;
        width: 14px !important;
        height: 14px !important;
        background: #ffffff !important;
        border-left: 1px solid #dce8f1 !important;
        border-top: 1px solid #dce8f1 !important;
        transform: rotate(45deg) !important;
    }

.ifd-mini-option {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #20314d !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

    .ifd-mini-option:hover {
        background: #f4f8fc !important;
    }

    .ifd-mini-option.selected {
        background: #eaf2f8 !important;
        color: #003d59 !important;
    }

.ifd-mini-option-left {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
}

    .ifd-mini-option-left strong {
        width: 34px !important;
        min-width: 34px !important;
        color: #00405f !important;
        font-size: .86rem !important;
        font-weight: 950 !important;
        letter-spacing: .02em !important;
    }

    .ifd-mini-option-left span {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #64748b !important;
        font-size: .82rem !important;
        font-weight: 820 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

.ifd-mini-option.selected .ifd-mini-option-left span,
.ifd-mini-option:hover .ifd-mini-option-left span {
    color: #20314d !important;
}

.ifd-mini-check {
    flex: 0 0 auto !important;
    color: #00405f !important;
    font-size: .88rem !important;
}

/* =========================================================
   Search input like ClientRequests search, aligned right
   ========================================================= */

.item-filter-simple-control,
.rq-search-wrap,
.wrq-search,
.item-filter-search {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 13px !important;
    border: 1px solid #d5e2ed !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #102033 !important;
    box-shadow: 0 8px 18px rgba(0, 61, 89, .045) !important;
    box-sizing: border-box !important;
}

    .item-filter-simple-control:hover,
    .item-filter-simple-control:focus-within,
    .rq-search-wrap:hover,
    .rq-search-wrap:focus-within,
    .wrq-search:hover,
    .wrq-search:focus-within,
    .item-filter-search:hover,
    .item-filter-search:focus-within {
        border-color: #b7ccdd !important;
        box-shadow: 0 12px 26px rgba(0, 61, 89, .075) !important;
    }

    .item-filter-simple-control > i,
    .rq-search-wrap > i,
    .wrq-search > i,
    .item-filter-search > i {
        width: 15px !important;
        min-width: 15px !important;
        color: #64748b !important;
        font-size: .82rem !important;
        text-align: center !important;
    }

    .item-filter-simple-control input,
    .rq-search-wrap input,
    .wrq-search input,
    .item-filter-search input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #172033 !important;
        font-size: .82rem !important;
        font-weight: 760 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

        .item-filter-simple-control input::placeholder,
        .rq-search-wrap input::placeholder,
        .wrq-search input::placeholder,
        .item-filter-search input::placeholder {
            color: #68768b !important;
            font-size: .82rem !important;
            font-weight: 760 !important;
        }

.item-clear-search {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
}

    .item-clear-search:hover {
        background: rgba(15, 84, 140, .08) !important;
        color: #00405f !important;
    }

.item-result-bar {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 4px 0 16px !important;
    color: #66758a !important;
    font-size: .86rem !important;
    font-weight: 820 !important;
    overflow: hidden !important;
}

    .item-result-bar span,
    .item-result-bar strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .item-result-bar strong {
        color: #003d59 !important;
        font-weight: 900 !important;
    }

@media (max-width: 1100px) {
    .item-filter-simple,
    .rq-filter-compact {
        flex-wrap: wrap !important;
    }

    .item-filter-simple-field.status,
    .item-filter-simple-field.kind,
    .item-filter-simple-field.city {
        width: 180px !important;
        flex: 0 0 180px !important;
    }

    .item-filter-simple-field.search {
        flex: 1 1 260px !important;
        width: auto !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 720px) {
    .item-filter-simple-field.status,
    .item-filter-simple-field.kind,
    .item-filter-simple-field.city,
    .item-filter-simple-field.search {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }

    .item-result-bar {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

        .item-result-bar span,
        .item-result-bar strong {
            white-space: normal !important;
        }
}