.ops-filter {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #dde6f2;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px
}

.ops-filter>div {
    min-width: 180px
}

.ops-filter label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px
}

.ops-filter input, .ops-filter select {
    width: 100%;
    border: 1px solid #ccd8e8;
    border-radius: 10px;
    padding: 10px 12px
}

.timezone-chip {
    margin-left: auto;
    /* border: 1px solid #d9e4f4; */
    border-radius: 999px;
    padding: 9px 13px;
    background: #f7faff;
    font-weight: 700
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 14px
}

.ops-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: 16px;
    padding: 17px;
    box-shadow: 0 8px 24px rgba(26, 48, 82, .05);
    transition: .18s
}

.ops-card:hover {
    transform: translateY(-2px);
    border-color: #8db1ff;
    box-shadow: 0 12px 30px rgba(47, 99, 243, .12)
}

.ops-card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #64748b;
    font-weight: 800;
    font-size: 12px
}

.ops-card .value {
    font-size: 26px;
    font-weight: 900;
    color: #12244a;
    margin: 9px 0 3px
}

.ops-card small {
    color: #7b879c
}

.ops-card i {
    font-size: 20px;
    color: #2f63f3
}

.action-approve {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important
}

.action-reject {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1000px) {
    .ops-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .ops-grid {
        grid-template-columns: 1fr
    }

    .timezone-chip {
        margin-left: 0;
        width: 100%
    }
}

/* Dashboard Date Range now uses the exact Referral Network picker structure and geometry. */
.ops-filter .dash-date-field {
    width: 390px;
    max-width: 390px;
    flex: 0 0 390px;
    min-width: 0
}

.ops-filter .dash-date-field .ref-range-wrap, .ops-filter .dash-date-field .ref-range-trigger {
    width: 100%
}

@media(max-width:767.98px) {
    .ops-filter .dash-date-field {
        width: 100%;
        max-width: none;
        flex: 1 1 100%
    }
}